Как запретить печать веб-страницы с помощью CSS

интернет страницы предназначены для просмотра на экране. Хотя существует множество возможных устройств, которые можно использовать для просмотра сайта (настольные компьютеры, ноутбуки, планшеты, телефоны, носимые устройства, телевизоры и т. д.), все они включают какой-то экран. Есть еще один способ, которым кто-то может просматривать ваш веб-сайт, без экрана. Мы имеем в виду физическую распечатку ваших веб-страниц.

Много лет назад вы обнаружили, что люди, печатающие веб-сайты, были довольно распространенным сценарием. Мы помним, как встречались со многими клиентами, которые были новичками в Интернете и чувствовали себя более комфортно, просматривая печатные страницы сайта. Затем они предоставили нам отзывы и правки на этих листах бумаги, вместо того, чтобы смотреть на экран, чтобы обсудить веб-сайт. Поскольку люди стали более комфортно пользоваться экранами в своей жизни, и по мере того, как эти экраны множились много раз мы видели все меньше и меньше людей, пытающихся распечатать веб-страницы на бумаге, но это все еще случаться. Возможно, вы захотите учесть это явление при планировании своего веб-сайта. Вы хотите, чтобы люди печатали ваши веб-страницы? Может быть, нет. В этом случае у вас есть несколько вариантов.

Как запретить печать веб-страницы с помощью CSS

Легко использовать CSS чтобы люди не могли распечатать ваши веб-страницы. Вам просто нужно создать однострочную таблицу стилей с именем «print.css», которая включает следующую строку CSS.

тело {дисплей: нет; }

Этот единственный стиль превратит "основной" элемент ваших страниц в не отображается - и поскольку все на ваших страницах является дочерним элементом элемента body, это означает, что вся страница / сайт не будет отображаться.

Когда у вас есть таблица стилей print.css, вы должны загрузить ее в свой HTML как таблицу стилей печати. Вот как вы это сделаете - просто добавьте следующую строку в элемент «head» на своих HTML-страницах.

Эта информация сообщает браузеру, что, если эта веб-страница настроена на печать, использовать эту таблицу стилей вместо любой таблицы стилей по умолчанию, которую страницы используют для отображения на экране. Когда страницы переключаются на этот лист «print.css», срабатывает стиль, который делает всю страницу не отображаемой, и все, что будет печататься, будет пустой страницей.

Блокировать по одной странице за раз

Если вам не нужно блокировать много страниц на вашем сайте, вы можете заблокировать печать на постраничной основе с помощью следующих стилей, вставленных в заголовок вашего HTML.

Этот стиль на странице будет иметь более высокую специфику, чем любые стили внутри вашего внешние таблицы стилей, что означает, что эта страница не будет печататься вообще, в то время как другие страницы без этой строки по-прежнему будут печататься нормально.

Станьте более привлекательными со своими заблокированными страницами

Что, если вы хотите заблокировать печать, но не хотите, чтобы ваши клиенты разочаровывались? Если они увидят, что печатается пустая страница, они могут расстроиться и подумать, что их принтер или компьютер сломались, и не понять, что вы отключили печать!

Чтобы избежать разочарования посетителей, вы можете немного придумать и вставить сообщение, которое будет отображаться только тогда, когда ваши читатели распечатывают страницу, заменяя другой контент. Для этого создайте стандартную веб-страницу и вверху страницы сразу после тега body поместите:

И закройте этот тег после того, как весь ваш контент будет написан, в самом низу страницы:

Эта страница предназначена для просмотра в Интернете и не может быть распечатана. Пожалуйста, просмотрите эту страницу по адресу http://webdesign.lifewire.com/od/advancedcss/qt/block_print.htm

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

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