Kueri media cetak adalah desain responsif primitif tertua yang pernah ada, dan sebagian besar situs membiarkannya kosong, jadi Ctrl+P mengirimkan bilah header, spanduk cookie, dan latar belakang gelap yang membuang-buang tinta. Lima aturan memperbaiki seluruh situs Anda untuk kertas.

@media print {
  header nav, footer, .cookie, aside { display: none; }

  body { background: white; color: black; }
  a { text-decoration: none; }
  article a::after { content: " (" attr(href) ")";
    font-size: 0.85em; }

  details { display: block; }
  details > *:not(summary) { display: block; }
}

Lima aturan yang membayar sendiri

  • Sembunyikan navigasi, tautan footer, dan overlay chrome apa pun: pembaca makalah bernavigasi dengan mata, bukan klik.
  • Paksa nilai terang: mode gelap adalah preferensi layar, dan jika salah diletakkan di atas kertas, tinta akan terbakar dan menjadi berbintik.
  • Tambahkan target tautan pada tautan teks artikel: kutipan tercetak yang tidak dapat Anda klik adalah kutipan palsu; attr(href) menjadikannya nyata.
  • Perluas konten yang dapat dilipat, panel detail yang sama dari akordeon zero-JS: panel menyimpan jawabannya dan menghilang secara diam-diam di atas kertas tanpa aturan ini.
  • Hindari elemen dengan posisi tetap; page-break-inside: hindari menggunakan kartu dan gambar untuk menjaga meja tetap utuh daripada membenturkannya ke lembaran.

Ulasan yang menjadikannya nyata

  1. Cetak beranda, artikel, dan halaman pencarian ke PDF sebenarnya; tiga halaman terlihat kosong di sebagian besar situs.
  2. Periksa cakupan tinta: area padat yang besar mendapat status default 'tidak ada latar belakang cetak' di sebagian besar browser, sehingga warna halus mungkin hilang tanpa terlewatkan.
  3. Uji aturan perluasan detail terhadap setiap komponen yang dapat diciutkan di situs, bukan hanya satu.
  4. Pertimbangkan properti hentian halaman untuk kartu atau kotak kutipan apa pun; lima menit di sini memutuskan apakah suatu resep mencakup dua lembar.

Sudut keadilan yang sangat gacor: seseorang yang berada di zona mati dengan printer resi termal Bluetooth juga merupakan pembaca sejati, dan lembar gaya cetak adalah cara situs Anda menghormati mereka dengan biaya satu blok media.