Веб-страницы предназначены для просмотра на экране. Несмотря на то, что существует множество возможных устройств, которые можно использовать для просмотра сайта (настольные компьютеры, ноутбуки, планшеты, телефоны, носимые устройства, телевизоры и т. Д.), Все они имеют экран какого-либо типа. Есть еще один способ, которым кто-то может просматривать ваш сайт, способ, который не включает экран. Мы имеем в виду физическую распечатку ваших веб-страниц.
Несколько лет назад вы обнаружили, что люди, печатающие веб-сайты, были довольно распространенным сценарием. Мы помним встречи со многими клиентами, которые были новичками в Интернете и чувствовали себя более комфортно, просматривая печатные страницы сайта. Затем они дали нам отзывы и исправления на этих листочках бумаги вместо того, чтобы смотреть на экран, чтобы обсудить сайт. По мере того, как людям стало удобнее работать с экранами в своей жизни, и когда эти экраны умножались во много раз, мы видели, как все меньше и меньше людей пытаются печатать веб-страницы на бумаге, но это все же происходит. Вы можете рассмотреть это явление, когда планируете свой веб-сайт. Вы хотите, чтобы люди печатали ваши веб-страницы? Может быть, нет. Если это так, у вас есть несколько вариантов.
Как заблокировать веб-страницу от печати с помощью CSS
С помощью CSS легко запретить людям печатать ваши веб-страницы. Вам просто нужно создать однострочную таблицу стилей с именем «print.css», которая включает следующую строку CSS.
body {display: none; }
Этот единый стиль превратит элемент «body» ваших страниц в то, что они не отображаются – и поскольку все на ваших страницах является дочерним элементом элемента body, это означает, что вся страница/сайт не будет отображаться.
Получив таблицу стилей «print.css», вы загрузите ее в свой HTML как таблицу стилей для печати. Вот как вы это сделаете – просто добавьте следующую строку в элемент head на ваших HTML-страницах.
Эта информация сообщает браузеру, что, если эта веб-страница настроена на печать, использовать эту таблицу стилей вместо любой таблицы стилей по умолчанию, которую страницы используют для отображения на экране. Когда страницы переключаются на этот лист “print.css”, включается стиль, при котором вся страница не отображается, и все, что будет напечатано, будет пустой страницей.
Блокировать одну страницу за раз
Если вам не нужно блокировать много страниц на вашем сайте, вы можете заблокировать печать постранично, используя следующие стили, вставленные в заголовок вашего HTML.
@media print {body {display: none}}
Этот стиль внутри страницы будет иметь более высокую специфичность, чем любые стили внутри ваших внешних таблиц стилей, что означает, что страница не будет печататься вообще, в то время как другие страницы без этой строки будут печататься нормально.
Получите фантазию с заблокированными страницами
Что если вы хотите заблокировать печать, но не хотите, чтобы ваши клиенты были разочарованы? Если они видят печать пустой страницы, они могут расстроиться и подумать, что их принтер или компьютер сломан, и не осознают, что вы по сути отключили печать!
Чтобы избежать разочарования посетителей, вы можете немного поумнеть и добавить сообщение, которое будет отображаться только тогда, когда ваши читатели распечатают страницу, заменив другой контент. Для этого создайте стандартную веб-страницу и в верхней части страницы сразу после тега body введите:
И закройте этот тег после того, как весь ваш контент будет написан, в самом низу страницы:
Затем, после того, как вы закрыли div «noprint», откройте другой div с сообщением, которое вы хотите отобразить при печати документа:
Эта страница предназначена для просмотра в Интернете и не может быть напечатана. Пожалуйста, просмотрите эту страницу по адресу http://webdesign.lifewire.com/od/advancedcss/qt/block_print.htm
Включите ссылку на ваш документ CSS для печати с именем print.css:
И в этот документ включены следующие стили:
#noprint {display: none; }
#print {display: block; }
Наконец, в вашей стандартной таблице стилей (или во внутреннем стиле в заголовке документа) напишите:
#print {display: none; }
#noprint {display: block; }
Это гарантирует, что сообщение для печати появится только на распечатанной странице, а веб-страница появится только на онлайн-странице.
Рассмотрим пользовательский опыт
Печать веб-страниц, как правило, является плохим опытом, поскольку современные сайты часто плохо переводятся на печатную страницу. Если вы не хотите создавать полностью отдельную таблицу стилей для определения стилей печати, вы можете использовать шаги из этой статьи, чтобы «отключить» печать на странице. Помните о влиянии, которое это может оказать на пользователей, которые полагаются на печать веб-сайтов (возможно, потому, что у них плохое зрение и плохо читают текст на экране) и принимают решения, которые будут работать для аудитории вашего сайта.
Оригинальная статья Дженнифер Крынин.Под редакцией Джереми Жирара.
