Как да блокирам уеб страница от печат с CSS

click fraud protection

уеб страници са предназначени за гледане на екран. Въпреки че има голямо разнообразие от възможни устройства, които могат да се използват за преглед на сайт (настолни компютри, лаптопи, таблети, телефони, носими устройства, телевизори и др.), всички те включват някакъв екран. Има и друг начин, по който някой може да разглежда вашия уебсайт, начин, който не включва екран. Имаме предвид физически разпечатки на вашите уеб страници.

Преди години бихте установили, че хората, които печатат уебсайтове, са били доста често срещан сценарий. Спомняме си, че се срещнахме с много клиенти, които бяха нови за мрежата и се чувстваха по-удобно да преглеждат отпечатаните страници на сайта. След това ни дадоха обратна връзка и редакции на тези листчета, вместо да гледат екрана, за да обсъдят уебсайта. Тъй като хората са се чувствали по-удобно с екраните в живота си, и тъй като тези екрани са се умножили много пъти сме виждали все по-малко хора, които се опитват да отпечатат уеб страници на хартия, но все пак го прави се случи. Може да искате да помислите за това явление, когато планирате уебсайта си. Искате ли хората да отпечатват вашите уеб страници? Може би не. Ако случаят е такъв, имате няколко опции.

instagram viewer

Как да блокирам уеб страница от печат с CSS

Той е лесен за използване CSS за да попречите на хората да отпечатват вашите уеб страници. Просто трябва да създадете таблица със стилове от 1 ред, наречена "print.css", която включва следния ред на CSS.

body {дисплей: няма; }

Този един стил ще превърне елемента "тяло" на вашите страници не се показва - и тъй като всичко на вашите страници е дъщерно на елемента body, това означава, че цялата страница / сайт няма да се показва.

След като имате своя "print.css" таблица със стилове, можете да го заредите във вашия HTML като лист със стилове за печат. Ето как бихте направили това - просто добавете следния ред към елемента "head" във вашите HTML страници.


Тази информация казва на браузъра, че ако тази уеб страница е настроена за печат, да използва тази таблица със стилове вместо каквато и да е таблица със стилове по подразбиране, която страниците използват за показване на екрана. Когато страниците превключат към този лист "print.css", стилът, който прави цялата страница да не се показва, ще започне и всичко, което ще се отпечата, ще бъде празна страница.

Блокиране по една страница

Ако не е необходимо да блокирате много страници на вашия сайт, можете да блокирате печата на страница по страница със следните стилове, поставени в главата на вашия HTML.


Този стил в страницата би имал по-висока специфичност от всички стилове във вашия външни стилови листове, което означава, че страницата изобщо няма да се отпечатва, докато други страници без този ред пак ще се отпечатват нормално.

Вземете Fancier с блокираните си страници

Какво ще стане, ако искате да блокирате печата, но не искате клиентите ви да се разочароват? Ако видят отпечатване на празна страница, може да се разстроят и да помислят, че принтерът или компютърът им са счупени и не осъзнават, че по същество сте деактивирали печата!

За да избегнете разочарование на посетителите, можете да си направите малко по-любител и да поставите съобщение, което ще се покаже само когато вашите читатели отпечатват страницата - замествайки другото съдържание. За да направите това, изградете вашата стандартна уеб страница и в горната част на страницата, веднага след маркера на тялото, поставете:


И затворете този маркер, след като цялото ви съдържание е написано, в най-долната част на страницата:


След това, след като затворите div "noprint", отворете друг div със съобщението, което искате да покажете, когато документът е отпечатан:


Тази страница е предназначена за гледане онлайн и може да не бъде отпечатана. Моля, прегледайте тази страница на http://webdesign.lifewire.com/od/advancedcss/qt/block_print.htm



Включете връзка към вашия CSS документ за печат с име print.css:


И в този документ включете следните стилове:

#noprint {дисплей: няма; }
#print {дисплей: блок; }

И накрая, във вашата стандартна таблица със стилове (или в вътрешен стил в главата на вашия документ), напишете:

#print {дисплей: няма; }
#noprint {дисплей: блок; }

Това ще гарантира, че съобщението за печат се появява само на отпечатаната страница, докато уеб страницата се появява само на онлайн страницата.

Помислете за потребителския опит

Печат на уеб страници обикновено е лош опит, тъй като днешните сайтове често не се превеждат добре на отпечатаната страница. Ако не искате да създавате изцяло отделен лист със стилове, за да диктувате стилове на печат, можете да помислите да използвате стъпките от тази статия, за да "изключите" отпечатването на страница. Имайте предвид въздействието, което това може да има върху потребители, които разчитат на печатане на уебсайтове (може би защото имат лоша визия и трудности при четене на екранен текст) и вземайте решения, които ще работят за вашия сайт публика.

Оригинална статия от Дженифър Кринин. Редактиран от Джеръми Жирард.

instagram story viewer