Skip to main content

Jak zablokować stronę internetową przed wydrukowaniem za pomocą CSS

PHP for Web Development (Kwiecień 2025)

PHP for Web Development (Kwiecień 2025)
Anonim

Strony internetowe mają być wyświetlane na ekranie. Chociaż istnieje wiele różnych urządzeń, które można wykorzystać do przeglądania strony (komputery stacjonarne, laptopy, tablety, telefony, urządzenia do noszenia, telewizory itp.), Wszystkie zawierają ekrany. Jest inny sposób, w jaki ktoś może przeglądać twoją stronę, sposób, który nie zawiera ekranu. Chodzi o fizyczny wydruk twoich stron internetowych.

Wiele lat temu okazało się, że ludzie drukujący strony internetowe byli dość powszechnym scenariuszem. Pamiętamy o spotkaniach z wieloma klientami, którzy byli nowi w sieci i czuli się bardziej komfortowo, przeglądając wydrukowane strony witryny. Następnie przekazali nam opinie i edytowali te fragmenty papieru, zamiast patrzeć na ekran w celu omówienia strony internetowej. Ponieważ ludzie lepiej czują się na ekranach w swoim życiu, a ponieważ te ekrany wielokrotnie się pomnażają, coraz mniej osób próbuje drukować strony internetowe na papierze, ale tak się dzieje. Możesz rozważyć to zjawisko podczas planowania swojej witryny. Czy chcesz, aby ludzie drukowali twoje strony internetowe? Może nie. Jeśli tak, masz kilka opcji.

Jak zablokować stronę internetową przed wydrukowaniem za pomocą CSS

Łatwo jest używać CSS, aby uniemożliwić ludziom drukowanie stron internetowych. Wystarczy utworzyć arkusz stylów o 1 linii o nazwie "print.css", który zawiera następujący wiersz CSS.

body {display: none; }

Ten styl sprawi, że element "body" Twoich stron nie będzie wyświetlany - a ponieważ wszystko na twoich stronach jest dzieckiem elementu body, oznacza to, że cała strona / strona nie będzie wyświetlana.

Gdy już masz arkusz stylów "print.css", załadujesz go do swojego HTML'a jako arkusz stylów drukowania. Oto, jak to zrobić - po prostu dodaj następujący wiersz do elementu "head" na stronach HTML.

Informacje te informują przeglądarkę, że jeśli ta strona internetowa jest ustawiona do drukowania, aby użyć tego arkusza stylów zamiast dowolnego domyślnego arkusza stylów, którego strony używają do wyświetlania na ekranie. W miarę przechodzenia stron do tego arkusza "print.css", styl, który powoduje, że cała strona nie jest wyświetlana, zostanie uruchomiony, a wszystko, co zostanie wydrukowane, będzie pustą stroną.

Blokuj jedną stronę naraz

Jeśli nie musisz blokować wielu stron w witrynie, możesz zablokować drukowanie na stronie po stronie z następującymi stylami wklejonymi do nagłówka kodu HTML.

Ten styl na stronie miałby większą specyfikę niż jakikolwiek styl wewnątrz zewnętrznych arkuszy stylów, co oznacza, że ​​strona nie drukowała w ogóle, podczas gdy inne strony bez tej linii drukowałyby się normalnie.

Zdobądź Fancier za pomocą zablokowanych stron

Co zrobić, jeśli chcesz zablokować drukowanie, ale nie chcesz, aby Twoi klienci byli sfrustrowani? Jeśli zobaczą drukowanie pustej strony, mogą się zdenerwować i pomyśleć, że ich drukarka lub komputer jest zepsuty i nie zdaje sobie sprawy, że w zasadzie wyłączono drukowanie!

Aby uniknąć frustracji odwiedzających, możesz zdobyć trochę hodowcy i umieścić wiadomość, która będzie wyświetlana tylko wtedy, gdy czytelnicy wydrukują stronę - zastępując inną treść. Aby to zrobić, utwórz standardową stronę internetową i u góry strony, zaraz za tagiem body, umieść:

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

Następnie, po zamknięciu elementu "noprint", otwórz kolejny element div z komunikatem, który chcesz wyświetlić po wydrukowaniu dokumentu:

Ta strona jest przeznaczona do przeglądania w Internecie i nie można jej drukować. Proszę zobaczyć tę stronę na http://webdesign.about.com/od/advancedcss/qt/block_print.htm

Dołącz link do swojego dokumentu drukowania CSS o nazwie print.css:

W tym dokumencie znajdują się następujące style:

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

Na koniec, w swoim standardowym arkuszu stylów (lub w stylu wewnętrznym w nagłówku dokumentu) napisz:

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

Zapewni to, że drukowany komunikat pojawi się tylko na wydrukowanej stronie, a strona internetowa pojawi się tylko na stronie internetowej.

Rozważ doświadczenie użytkownika

Drukowanie stron internetowych jest ogólnie słabym doświadczeniem, ponieważ dzisiejsze witryny często nie tłumaczą się dobrze na drukowanej stronie. Jeśli nie chcesz tworzyć całkowicie oddzielnego arkusza stylów do dyktowania stylów wydruku, możesz rozważyć użycie kroków opisanych w tym artykule w celu "wyłączenia" drukowania na stronie. Bądź świadomy wpływu, jaki może to mieć na użytkowników, którzy polegają na drukowaniu stron internetowych (być może dlatego, że mają słabą widoczność i zmagają się z czytaniem tekstu na ekranie) i podejmują decyzje, które będą skuteczne dla odbiorców Twojej witryny.

Oryginalny artykuł Jennifer Krynin. Edytowane przez Jeremy'ego Girarda.