Bagaimanakah Saya Boleh Mengawal Keterlihatan Elemen Semasa Mencetak dengan CSS?

Mengawal Keterlihatan dalam Cetakan dengan CSS

Apabila mencetak halaman web, selalunya wajar untuk menyembunyikan elemen tertentu yang tidak perlu atau mengganggu pada halaman bercetak. CSS menyediakan alat berkuasa yang dikenali sebagai "@media print" yang membolehkan pembangun mengawal keterlihatan elemen khusus untuk pencetakan.

Keserasian Pelayar

Cetakan "@media " ciri disokong secara meluas oleh penyemak imbas moden, termasuk Chrome, Firefox, Safari dan Edge. Ini memastikan gaya cetakan akan digunakan dengan berkesan pada kebanyakan peranti pengguna.

Elemen Penandaan untuk Pencetakan

Untuk mencapai kawalan keterlihatan yang diingini, tetapkan kelas unik, seperti sebagai "boleh dicetak," kepada elemen yang sepatutnya ditunjukkan semasa mencetak.

Memohon Cetakan Gaya

Dalam bahagian "@media print" CSS, nyatakan bahawa semua elemen harus disembunyikan (cth., "display:none;") kecuali bagi yang mempunyai kelas "boleh dicetak".

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

Menyelesaikan Masalah Keterlihatan

Kod yang disediakan pada mulanya menyembunyikan segala-galanya. Untuk menjadikan elemen "boleh dicetak" kelihatan, gunakan pendekatan negatif: sembunyikan semua elemen yang bukan sebahagian daripada kelas "boleh dicetak".

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

Contoh Penggunaan

Untuk mengendalikan situasi tertentu di mana elemen tertentu harus dipaparkan hanya dalam penyemak imbas atau hanya pada halaman bercetak:

• Tambahkan kelas bernama "noPrint" kepada elemen yang tidak sepatutnya muncul pada halaman bercetak.
• Tambahkan kelas bernama "onlyPrint" pada elemen yang sepatutnya muncul hanya pada halaman bercetak.

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

Dengan melaksanakan teknik ini, pembangun boleh mengawal keterlihatan elemen secara berkesan berdasarkan mod pencetakan, meningkatkan pengalaman pengguna dan memastikan bahawa hanya yang dikehendaki kandungan dicetak.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengawal Keterlihatan Elemen Semasa Mencetak dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!