Geek Rants Mengapa Banyak Situs Web Gagal Menggunakan Lembar Gaya Cetak?

Tidak pernah berhenti membuat saya takjub bahwa orang harus mencari tautan atau tombol bertuliskan “Cetak” di halaman web, terutama mengingat ada teknologi ajaib yang membuat langkah itu tidak perlu. Sayangnya hampir tidak ada yang menggunakannya, meskipun ... 10 tahun.

Tidak hanya konyol membutuhkan langkah ekstra untuk mencetak, tetapi menggunakan lembar gaya cetak akan menghemat tinta bagi siapa pun yang tidak menggunakan tautan yang dapat dicetak. Dan tentu saja, ada banyak orang yang menggunakan cetak-ke-PDF untuk menyimpan artikel untuk nanti tanpa membuang-buang kertas.

Apa Itu Lembar Gaya Cetak?

Sebagian besar situs web menerapkan fungsi cetaknya dengan membawa Anda ke halaman lain, yang diformat berbeda untuk printer - tetapi ini sebenarnya tidak perlu. Setiap browser menerapkan teknologi CSS sederhana yang dikenal sebagai Print Stylesheets, yang tidak lebih dari file yang menentukan elemen untuk disembunyikan ketika browser Anda mencetak halaman.

Bagi mereka yang tidak terbiasa, CSS berarti Cascading Style Sheets, dan begitulah browser Anda tahu cara memformat kode sumber HTML untuk halaman web menjadi apa yang sebenarnya Anda lihat di layar. Segala sesuatu dari font, warna, batas, dan bahkan gambar latar belakang dapat ditentukan dalam style sheet.

Menambahkan lembar gaya cetak sesederhana memasukkan satu baris ini ke halaman Anda HTML-media = bagian cetak dari kode memberitahu browser untuk hanya menggunakan lembar gaya ini saat mencetak.

File ini umumnya terlihat seperti ini:

#sidebar, #footer, #navigation, #sharinglinks, #topad, #comments display: none

Ya, benar-benar sesederhana itu. Jadi bagaimana cara kerjanya? Berikut adalah contoh halaman web normal di sebelah kiri, dengan semua navigasi, logo, dan iklan terlihat jelas dengan ID yang terkait - dan di sebelah kanan, halaman yang sama dengan lembar gaya cetak yang diterapkan, menyembunyikan semua elemen tersebut.

Tentunya Anda lebih suka mencetak salah satu dari ini di atas yang lain, kan?

Contoh Kegagalan Print Stylesheet

Sayangnya, ada banyak situs web besar yang tidak repot-repot menerapkannya sama sekali. Lihatlah apa yang terjadi ketika Anda mencoba mencetak dari New York Times:

Beberapa situs, seperti jaringan situs Gawker, bahkan lebih buruk. Tidak hanya mereka tidak memiliki tampilan cetak, ketika Anda mencoba dan mencetak, itu menyerupai sup tinta. Sejauh yang kami tahu, tidak ada cara untuk mencetak dari situs Gawker tanpa menggunakan layanan terpisah seperti Keterbacaan, atau secara manual menyorot konten pada halaman, yang hampir tidak mungkin pada desain baru mereka..

Sungguh menyedihkan. Banyak situs terbesar gagal menjalankan fitur ini.

Untungnya, Beberapa Situs Menggunakannya

Berikut adalah contoh tampilan cetak yang diformat dengan benar - tanpa harus repot menemukan beberapa tautan cetak. Situs BBC News dengan rapi memformat artikel untuk dicetak, lengkap dengan tajuk khusus. Mereka memang memasukkan komentar dalam tampilan cetak, tetapi itu masih pekerjaan yang dilakukan dengan baik.

Ada beberapa situs lain yang melakukan hal yang sama, seperti ArsTechnica dan ... situs kami, tetapi konyol untuk menunjukkan tangkapan layar dari semuanya. Dalam penelitian kami, situs yang menerapkannya dengan benar sangat sedikit dan jarang.

Jadi untuk menyelesaikan ... luangkan waktu 5 menit untuk menerapkan lembar gaya cetak untuk situs Anda!