Bagaimanakah CSS Boleh Meningkatkan Kecekapan Pencetakan dengan Mengawal Gelagat Cetakan?

CSS untuk Pencetakan Terpilih

Mencetak halaman web yang luas boleh menyusahkan, memerlukan kemasukan elemen yang tidak perlu. CSS menyediakan penyelesaian melalui ciri "@media print"nya. Memahami cara ia berfungsi boleh membantu anda memperkemas proses pencetakan anda.

Sokongan Penyemak Imbas

Kebanyakan penyemak imbas moden menyokong "@media print." Ia digunakan secara meluas dalam pelayar popular seperti Chrome, Firefox, Safari dan Edge. Ciri ini telah menjadi standard yang boleh dipercayai untuk mengawal tingkah laku cetakan.

Memaparkan Elemen Khusus

Untuk memaparkan elemen secara selektif semasa mencetak, anda boleh menggunakan salah satu daripada dua pendekatan:

1. Pendekatan Penyenaraian Putih (paparan: blok):

   • Buat kelas CSS (cth., "boleh dicetak").
   • Gunakan "paparan: tiada" pada semua elemen dalam pertanyaan cetakan media kecuali yang mempunyai kelas "boleh dicetak".
   • Ini akan memastikan bahawa hanya elemen dengan kelas "boleh dicetak" kekal kelihatan semasa pencetakan.

2. Pendekatan Penyenaraian Hitam (bukan):

   • Gunakan "paparan: tiada" pada semua elemen dalam pertanyaan cetakan media.
   • Gunakan pemilih "bukan" untuk mengecualikan elemen dengan kelas "boleh dicetak" daripada peraturan "display: none".
   • Walaupun pendekatan ini kelihatan logik, pendekatan ini mungkin tidak berfungsi dalam semua penyemak imbas disebabkan oleh pengehadan dalam sokongan CSS.

Kod Contoh

Menggunakan pendekatan senarai putih:

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

Menyembunyikan Elemen Semasa Menyemak Imbas

Untuk menyembunyikan elemen tertentu semasa menyemak imbas tetapi memaparkannya semasa mencetak, anda boleh menggunakan kod berikut:

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

Kod ini akan menyembunyikan elemen dengan "noPrint " kelas semasa menyemak imbas dan memaparkan elemen dengan kelas "onlyPrint" semasa mencetak.

Atas ialah kandungan terperinci Bagaimanakah CSS Boleh Meningkatkan Kecekapan Pencetakan dengan Mengawal Gelagat Cetakan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!