Bolehkah cetakan CSS @media Digunakan untuk Mencetak Elemen Tersuai?

Mencetak Elemen Tersuai dengan CSS

Apabila berhadapan dengan keperluan untuk mencipta versi mesra pencetak halaman kaya kandungan, CSS menyediakan mekanisme yang berkuasa melalui peraturan cetakan @media. Walau bagaimanapun, penyelesaian yang disediakan menimbulkan persoalan tentang kebolehlaksanaan dan keserasian penyemak imbas.

Sokongan Penyemak Imbas untuk @cetakan media

Peraturan cetakan @media menikmati sokongan daripada semua penyemak imbas moden utama , termasuk Chrome, Firefox, Safari dan Edge. Ini memastikan gaya cetakan boleh digunakan secara konsisten merentas pelbagai platform.

Menyembunyikan dan Mendedahkan Elemen dengan CSS

Untuk memaparkan elemen secara terpilih semasa pencetakan, anda boleh menggunakan CSS untuk sembunyikan segala-galanya kecuali yang ditandakan dengan kelas tertentu. Coretan CSS berikut mencapai perkara ini:

@media print {
  * {
    display: none;
  }
  .printable,
  .printable > * {
    display: block;
  }
}

Dalam pendekatan ini, semua elemen dengan kelas "boleh dicetak" dan anak mereka akan kelihatan semasa mencetak, manakala yang lain akan disembunyikan.

Pemilih Negatif dan Keserasian Penyemak Imbas

Semasa menggunakan pemilih "bukan" untuk mengecualikan elemen kelihatan logik, ia mungkin tidak berfungsi seperti yang diharapkan dalam penyemak imbas tertentu. Untuk menangani perkara ini, pendekatan pelengkap boleh digunakan:

@media print {
  body *:not(.printable *) {
    display: none;
  }
}

Peraturan CSS ini menyembunyikan semua elemen dalam badan, kecuali keturunan unsur dengan kelas "boleh dicetak".

Memaparkan Elemen dalam Pelayar dan Pencetak

Untuk memaparkan elemen tertentu dalam penyemak imbas tetapi menyembunyikannya pada cetakan, anda boleh menggunakan teknik CSS berikut:

@media print {
  .noPrint {
    display: none;
  }
}

@media screen {
  .onlyPrint {
    display: none;
  }
}

Pendekatan ini membolehkan kemasukan elemen (cth., pautan atau logo) yang masing-masing hanya berkaitan untuk penyemak imbas atau output cetakan.

Atas ialah kandungan terperinci Bolehkah cetakan CSS @media Digunakan untuk Mencetak Elemen Tersuai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!