Jak zablokować stronę internetową przed drukowaniem za pomocą CSS?

strony internetowe mają być oglądane na ekranie. Chociaż istnieje wiele różnych możliwych urządzeń, których można użyć do przeglądania witryny (komputery stacjonarne, laptopy, tablety, telefony, urządzenia do noszenia, telewizory itp.), wszystkie zawierają jakiś ekran. Istnieje inny sposób, w jaki ktoś może przeglądać Twoją witrynę, sposób, który nie obejmuje ekranu. Mamy na myśli fizyczny wydruk Twoich stron internetowych.

Wiele lat temu można by się przekonać, że ludzie drukujący strony internetowe byli dość powszechnym scenariuszem. Pamiętamy spotkania z wieloma klientami, którzy byli nowicjuszami w sieci i czuli się bardziej komfortowo przeglądając drukowane strony serwisu. Następnie przekazali nam opinie i poprawki na tych kawałkach papieru, zamiast patrzeć na ekran, aby omówić witrynę. W miarę jak ludzie czują się bardziej komfortowo z ekranami w ich życiu i gdy te ekrany się mnożą wiele razy widzieliśmy coraz mniej osób próbujących drukować strony internetowe na papierze, ale nadal tak jest zdarzyć. Możesz wziąć pod uwagę to zjawisko, planując swoją stronę internetową. Czy chcesz, aby ludzie drukowali Twoje strony internetowe? Może nie. Jeśli tak jest, masz kilka opcji.

Jak zablokować stronę internetową przed drukowaniem za pomocą CSS?

Jest łatwy w użyciu CSS aby uniemożliwić innym drukowanie Twoich stron internetowych. Wystarczy utworzyć jednowierszowy arkusz stylów o nazwie „print.css”, który zawiera następujący wiersz CSS.

ciało { wyświetlacz: brak; }

Ten jeden styl zmieni element „body” twoich stron na nie jest wyświetlany — a ponieważ wszystko na Twoich stronach jest potomkiem elementu body, oznacza to, że cała strona/witryna nie zostanie wyświetlona.

Gdy masz już swój arkusz stylów „print.css”, załaduj go do swojego HTML jako arkusz stylów wydruku. Oto, jak możesz to zrobić — po prostu dodaj następujący wiersz do elementu „head” na swoich stronach HTML.

Te informacje informują przeglądarkę, że jeśli ta strona internetowa jest ustawiona na drukowanie, ma używać tego arkusza stylów zamiast dowolnego domyślnego arkusza stylów, którego strony używają do wyświetlania na ekranie. Gdy strony przełączają się na ten arkusz „print.css”, styl, który sprawia, że ​​cała strona nie jest wyświetlana, zostanie uruchomiony i wszystko, co zostanie wydrukowane, będzie pustą stroną.

Blokuj jedną stronę na raz

Jeśli nie musisz blokować wielu stron w swojej witrynie, możesz zablokować drukowanie na zasadzie strona po stronie, wklejając następujące style w nagłówku kodu HTML.

Ten styl na stronie miałby większą szczegółowość niż jakiekolwiek style w twoim zewnętrzne arkusze stylów, co oznacza, że ​​ta strona nie zostałaby wydrukowana w ogóle, podczas gdy inne strony bez tego wiersza nadal byłyby drukowane normalnie.

Stań się bardziej fantazyjny dzięki zablokowanym stronom

Co zrobić, jeśli chcesz zablokować drukowanie, ale nie chcesz, aby Twoi klienci byli sfrustrowani? Jeśli zobaczą pustą wydrukowaną stronę, mogą się zdenerwować i pomyśleć, że ich drukarka lub komputer są zepsute i nie zdają sobie sprawy, że zasadniczo wyłączyłeś drukowanie!

Aby uniknąć frustracji odwiedzających, możesz stać się trochę bardziej fantazyjny i umieścić wiadomość, która wyświetli się tylko wtedy, gdy czytelnicy wydrukują stronę — zastępując inną treść. Aby to zrobić, zbuduj swoją standardową stronę internetową, a na górze strony, zaraz po tagu body, umieść:

I zamknij ten tag po zapisaniu całej treści, na samym dole strony:

Ta strona jest przeznaczona do przeglądania online i nie może być drukowana. Proszę zobaczyć tę stronę na http://webdesign.lifewire.com/od/advancedcss/qt/block_print.htm

#noprint { wyświetlanie: brak; }
#drukuj { wyświetl: blok; }

#drukuj { wyświetl: brak; }
#noprint { wyświetl: blok; }