Cara Memblokir Halaman Web Dari Mencetak Dengan CSS

Halaman web dimaksudkan untuk dilihat di layar. Meskipun ada berbagai kemungkinan perangkat yang dapat digunakan untuk melihat situs (desktop, laptop, tablet, ponsel, perangkat yang dapat dikenakan, TV, dll.), semuanya menyertakan semacam layar. Ada cara lain seseorang dapat melihat situs web Anda, cara yang tidak menyertakan layar. Kami mengacu pada cetakan fisik halaman web Anda.

Bertahun-tahun yang lalu, Anda akan menemukan bahwa orang-orang yang mencetak situs web adalah skenario yang cukup umum. Kami ingat bertemu dengan banyak klien yang baru mengenal web dan merasa lebih nyaman meninjau halaman cetak situs. Mereka kemudian memberi kami umpan balik dan pengeditan pada kertas-kertas itu alih-alih melihat layar untuk mendiskusikan situs web. Karena orang-orang menjadi lebih nyaman dengan layar dalam hidup mereka, dan karena layar itu berlipat ganda berkali-kali, kami telah melihat semakin sedikit orang yang mencoba mencetak halaman web ke kertas, tetapi tetap saja terjadi. Anda mungkin ingin mempertimbangkan fenomena ini ketika Anda merencanakan situs web Anda. Apakah Anda ingin orang mencetak halaman web Anda? Mungkin Anda tidak. Jika itu masalahnya, Anda memiliki beberapa opsi.

Cara Memblokir Halaman Web Dari Mencetak Dengan CSS

Sangat mudah digunakan CSS untuk mencegah orang mencetak halaman web Anda. Anda hanya perlu membuat stylesheet 1 baris bernama "print.css" yang menyertakan baris CSS berikut.

tubuh { tampilan: tidak ada; }

Gaya yang satu ini akan mengubah elemen "tubuh" halaman Anda menjadi tidak ditampilkan — dan karena semua yang ada di halaman Anda adalah anak dari elemen body, ini berarti seluruh halaman/situs tidak akan ditampilkan.

Setelah Anda memiliki stylesheet "print.css", Anda akan memuatnya ke dalam HTML sebagai lembar gaya cetak. Inilah cara Anda melakukannya — cukup tambahkan baris berikut ke elemen "head" di halaman HTML Anda.

Informasi ini memberi tahu browser bahwa jika halaman web ini diatur untuk dicetak, gunakan lembar gaya ini alih-alih lembar gaya default apa pun yang digunakan halaman untuk tampilan di layar. Saat halaman beralih ke lembar "print.css" ini, gaya yang membuat seluruh halaman tidak ditampilkan akan muncul dan semua yang akan dicetak akan menjadi halaman kosong.

Blokir Satu Halaman Sekaligus

Jika Anda tidak perlu memblokir banyak halaman di situs Anda, Anda dapat memblokir pencetakan halaman demi halaman dengan gaya berikut ditempelkan ke kepala HTML Anda.

Gaya dalam halaman ini akan memiliki kekhususan yang lebih tinggi daripada gaya apa pun di dalam Anda lembar gaya eksternal, yang berarti halaman tersebut tidak akan dicetak sama sekali, sedangkan halaman lain tanpa garis ini akan tetap dicetak secara normal.

Menjadi Lebih Menarik Dengan Halaman Anda yang Diblokir

Bagaimana jika Anda ingin memblokir pencetakan, tetapi tidak ingin pelanggan Anda frustrasi? Jika mereka melihat pencetakan halaman kosong, mereka mungkin marah dan mengira printer atau komputer mereka rusak dan tidak menyadari bahwa Anda pada dasarnya telah menonaktifkan pencetakan!

Untuk menghindari frustrasi pengunjung, Anda bisa sedikit lebih menarik dan memasukkan pesan yang hanya akan ditampilkan saat pembaca Anda mencetak halaman — menggantikan konten lainnya. Untuk melakukan ini, buat halaman web standar Anda, dan di bagian atas halaman, tepat setelah tag body, letakkan:

Dan tutup tag itu setelah semua konten Anda ditulis, di bagian paling bawah halaman:

Halaman ini dimaksudkan untuk dilihat secara online dan tidak boleh dicetak. Silakan lihat halaman ini di http://webdesign.lifewire.com/od/advancedcss/qt/block_print.htm

#noprint { tampilan: tidak ada; }
#print { tampilan: blok; }

#print { tampilan: tidak ada; }
#noprint { tampilan: blok; }