10Aug
Tidak pernah berhenti membuat saya takjub bahwa orang harus mencari tautan atau tombol yang bertuliskan "Cetak" di halaman web, terutama mengingat ada teknologi keajaiban yang membuat langkah itu tidak perlu. Sayangnya hampir tidak ada yang menggunakannya, meski sudah. .. 10 tahun.
Tidak hanya konyol untuk meminta langkah tambahan untuk mencetak, namun dengan menggunakan stylesheet cetak akan menghemat beberapa tinta untuk siapa pun yang tidak menggunakan tautan cetak. Dan tentu saja, ada banyak orang yang menggunakan print-to-PDF untuk menyimpan artikel untuk nanti tanpa membuang-buang kertas.
Apakah Print Stylesheets itu?
Sebagian besar situs web menerapkan fungsi cetak mereka dengan membawa Anda ke halaman lain, yang diformat secara berbeda untuk printer - namun ini sebenarnya tidak diperlukan. Setiap browser menerapkan teknologi CSS sederhana yang dikenal sebagai Print Stylesheets, yang tidak lebih dari sebuah file yang menentukan elemen untuk disembunyikan saat browser Anda mencetak halaman.
Bagi mereka yang tidak terbiasa, CSS berarti Cascading Style Sheets, dan bagaimana browser Anda mengetahui bagaimana memformat kode sumber HTML untuk halaman web ke dalam apa yang sebenarnya Anda lihat di layar. Semuanya dari font, warna, perbatasan, dan bahkan gambar latar dapat ditentukan dalam style sheet.
Menambahkan stylesheet cetak sama mudahnya dengan memasukkan satu baris ini ke dalam HTML halaman Anda-media = print bagian dari kode memberitahu browser untuk hanya menggunakan style sheet ini saat mencetak.
& lt; link rel = "stylesheet" href = "print.css" type = "text / css" media = "cetak" & gt;
File ini umumnya terlihat seperti ini:
#sidebar, #footer, #navigation, #sharinglinks, #topad, #comments{ display: none}
Ya, itu sesederhana itu. Jadi bagaimana cara kerjanya? Berikut adalah contoh halaman web biasa di sebelah kiri, dengan semua navigasi, logo, dan iklan terlihat jelas dengan ID yang terkait - dan di sebelah kanan, halaman yang sama dengan lembar kerja cetak diterapkan, menyembunyikan semua elemen tersebut.
Jelas Anda lebih memilih untuk mencetak salah satu dari yang lainnya, bukan?
Contoh Kegagalan Stylesheet Cetak
Sayangnya, hanya ada banyak situs web besar yang tidak perlu menerapkannya sama sekali. Lihatlah apa yang terjadi saat Anda mencoba mencetak dari New York Times: Beberapa situs, seperti jaringan situs Gawker, bahkan lebih buruk lagi. Mereka tidak hanya memiliki tampilan yang dapat dicetak, saat 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 menyoroti konten di laman, yang hampir tidak mungkin dilakukan pada desain baru mereka.
Sungguh menyedihkan, sungguh. Banyak situs terbesar yang sama sekali gagal mengganggu penerapan fitur ini.
Syukurlah, Beberapa Situs Gunakan Mereka
Berikut adalah contoh tampilan cetak yang diformat dengan benar - tanpa harus repot-repot mencari beberapa tautan cetak. Situs BBC News dengan rapi memformat artikel untuk dicetak, lengkap dengan header kustom. Mereka termasuk komentar dalam tampilan cetak, tapi masih pekerjaannya bagus.
Ada beberapa situs lain yang melakukan hal yang sama, seperti ArsTechnica dan. .. situs kami, tapi akan sangat bodoh untuk menunjukkan tangkapan layar dari semuanya. Dalam penelitian kami, situs yang menerapkannya dengan benar sedikit dan jauh antara keduanya.
Jadi untuk membungkus. .. silahkan mengambil 5 menit yang dibutuhkan untuk menerapkan print stylesheet untuk situs Anda!