Skip to main content

Cara Memblokir Halaman Web Dari Mencetak Dengan CSS

14. Cara Custom (Mengubah) Url Website File Html (Juni 2025)

14. Cara Custom (Mengubah) Url Website File Html (Juni 2025)
Anonim

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

Bertahun-tahun yang lalu, Anda akan menemukan bahwa 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 tercetak dari situs tersebut. Mereka kemudian memberi kami umpan balik dan pengeditan pada potongan-potongan kertas itu alih-alih melihat layar untuk membahas situs web. Ketika orang-orang menjadi lebih nyaman dengan layar dalam kehidupan mereka, dan karena layar tersebut telah berlipat ganda berkali-kali, kami telah melihat semakin sedikit orang mencoba untuk mencetak halaman web ke kertas, tetapi itu masih terjadi. Anda mungkin ingin mempertimbangkan fenomena ini ketika Anda merencanakan situs web Anda. Apakah Anda ingin orang mencetak halaman web Anda? Mungkin Anda tidak melakukannya. Jika itu masalahnya, Anda memiliki beberapa opsi.

Cara Memblokir Halaman Web Dari Mencetak Dengan CSS

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

body {display: none; }

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 Anda sebagai stylesheet cetak. Di sini adalah bagaimana Anda akan melakukannya - tambahkan saja baris berikut ke elemen "head" di halaman HTML Anda.

Informasi ini memberi tahu browser bahwa jika halaman web ini diatur untuk dicetak, untuk menggunakan stylesheet ini, bukan apa pun gaya default yang digunakan halaman untuk tampilan di layar. Ketika halaman beralih ke lembar "print.css" ini, gaya yang membuat seluruh halaman tidak ditampilkan akan menendang masuk dan semua yang akan dicetak akan menjadi halaman kosong.

Blok Satu Halaman Setiap Saat

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

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

Dapatkan Pelamun Dengan Halaman Anda Yang Diblokir

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

Untuk menghindari frustrasi pengunjung, Anda bisa mendapatkan sedikit pelamun dan memasukkan pesan yang hanya akan ditampilkan ketika 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:

Kemudian, setelah Anda menutup div "noprint", buka div lain dengan pesan yang ingin Anda tampilkan saat dokumen dicetak:

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

Sertakan tautan ke dokumen CSS cetak Anda yang bernama print.css:

Dan dalam dokumen itu termasuk gaya berikut:

#noprint {display: none; } #print {display: block; }

Akhirnya, dalam stylesheet standar Anda (atau dalam gaya internal di kepala dokumen Anda), tulis:

#print {display: none; } #noprint {display: block; }

Ini akan memastikan bahwa pesan cetak hanya muncul pada halaman yang dicetak, sementara halaman web hanya muncul di halaman online.

Pertimbangkan Pengalaman Pengguna

Mencetak halaman web pada umumnya merupakan pengalaman yang buruk karena situs-situs hari ini sering tidak diterjemahkan dengan baik ke halaman yang dicetak. Jika Anda tidak ingin membuat lembar gaya yang sepenuhnya terpisah untuk mendikte gaya cetak, Anda dapat mempertimbangkan menggunakan langkah-langkah dari artikel ini untuk "mematikan" pencetakan pada halaman. Waspadai dampak yang ditimbulkan terhadap pengguna yang mengandalkan situs web pencetakan (mungkin karena mereka memiliki visi yang buruk dan kesulitan membaca teks di layar) dan membuat keputusan yang akan berfungsi untuk audiens situs Anda.

Artikel asli oleh Jennifer Krynin. Diedit oleh Jeremy Girard.