Веб-сторінки призначені для перегляду на екрані. Незважаючи на те, що існує безліч різних пристроїв, які можна використовувати для перегляду сайту (настільні комп'ютери, ноутбуки, планшети, телефони, носимі пристрої, телевізори тощо), Всі вони мають екран будь-якого типу. Є ще один спосіб, яким хтось може переглядати ваш сайт, спосіб, який не включає екран. Ми маємо на увазі фізичну роздруківку ваших веб-сторінок.
Кілька років тому ви виявили, що люди, які друкують веб-сайти, були досить поширеним сценарієм. Ми пам'ятаємо зустрічі з багатьма клієнтами, які були новачками в Інтернеті і відчували себе більш комфортно, переглядаючи друковані сторінки сайту. Потім вони дали нам відгуки і виправлення на цих листочках паперу замість того, щоб дивитися на екран, щоб обговорити сайт. У міру того, як людям стало зручніше працювати з екранами в своєму житті, і оскільки ці екрани множилися в багато разів, ми бачили все менше і менше людей, які намагаються друкувати веб-сторінки на папері, але це все ж відбувається. Ви можете розглянути це явище, коли плануєте свій веб-сайт. Ви хочете, щоб люди друкували ваші веб-сторінки? Можливо, ні. Якщо це так, у вас є кілька варіантів.
Як заблокувати веб-сторінку від друку за допомогою CSS
За допомогою CSS легко заборонити людям друкувати ваші веб-сторінки. Вам просто потрібно створити однострокову таблицю стилів з назвою «print.css», яка включає наступний рядок CSS.
тіло {дисплей: ні;}
Цей єдиний стиль перетворить елемент «body» ваших сторінок на те, що вони не відображаються - і оскільки всі на ваших сторінках є дочірнім елементом елемента body, це означає, що вся сторінка/сайт не буде відображатися.
Отримавши таблицю стилів print.css, ви завантажите її в HTML як таблицю стилів для друку. Ось як ви це зробите - просто додайте наступний рядок в елемент head на ваших HTML-сторінках.
<link rel = ""stylesheet"" type = ""text / css"" href = ""print.css"" media = ""print"" />
Ця інформація повідомляє переглядачу, що, якщо ця веб-сторінка налаштована на друк, використовувати цю таблицю стилів замість будь-якої таблиці стилів за замовчуванням, яку сторінки використовують для відображення на екрані. Коли сторінки переключаються на цей аркуш print.css, вмикається стиль, який робить всю сторінку не відображеною, і все, що буде друкуватися, буде порожньою сторінкою.
Блокувати одну сторінку за раз
Якщо ви не бажаєте блокувати багато сторінок на вашому сайті, ви можете заблокувати друк, використовуючи наступні стилі, вставлені у заголовок вашого HTML.
<style type = ""text / css""> @media print {body {display: none}} </ style>
Цей стиль всередині сторінки матиме більш високу специфічність, ніж будь-які стилі всередині ваших зовнішніх таблиць стилів, що означає, що сторінка взагалі не буде друкуватися, в той час як інші сторінки без цього рядка будуть друкуватися нормально.
Отримайте фантазію із заблокованими сторінками
Що якщо ви хочете заблокувати друк, але не хочете, щоб ваші клієнти були розчаровані? Якщо вони бачать друк порожньої сторінки, вони можуть засмутитися і подумати, що їх принтер або комп'ютер зламаний, і не усвідомлюють, що ви по суті відключили печатку!
Щоб уникнути розчарування відвідувачів, ви можете трохи порозумнішати і вставити повідомлення, яке буде відображатися тільки тоді, коли ваші читачі роздрукують сторінку, замінивши інший контент. Для цього створіть стандартну веб-сторінку і у верхній частині сторінки відразу після теґу body введіть:
<div id = ""noprint"">
І закрийте цей тег після того, як весь ваш контент буде написаний, в самому низу сторінки:
</ DIV>
Після того, як ви закрили div «noprint», відкрийте інший div з повідомленням, яке ви хочете показати під час друку документа:
< div id = «print» >
< p > Ця сторінка призначена для перегляду в Інтернеті і не може бути роздрукована. Будь ласка, перегляньте цю сторінку за адресою http://webdesign.lifewire.com/od/advancedcss/qt/block_print.htm </ p>
</ div>
Увімкніть посилання на ваш документ CSS для друку з назвою print.css:
<link rel = ""stylesheet"" type = ""text / css"" href = ""print.css"" media = ""print"" />
І в цей документ включені наступні стилі:
#noprint {display: none; }
#print {display: block; }
Нарешті, у вашій стандартній таблиці стилів (або у внутрішньому стилі у заголовку документа) напишіть:
#print {display: none; }
#noprint {display: block; }
Це гарантує, що повідомлення для друку з'явиться тільки на роздрукованій сторінці, а веб-сторінка з'явиться тільки на онлайн-сторінці.
Розгляньмо досвід користувача
Друк веб-сторінок, як правило, є поганим досвідом, оскільки сучасні сайти часто погано перекладаються на друковану сторінку. Якщо ви не бажаєте створювати абсолютно окрему таблицю стилів для визначення стилів друку, ви можете використовувати кроки з цієї статті, щоб «вимкнути» друк на сторінці. Пам'ятайте про вплив, який це може зробити на користувачів, які покладаються на друк веб-сайтів (можливо, тому що у них поганий зір і погано читають текст на екрані) і приймають рішення, які будуть працювати для аудиторії вашого сайту.
Оригінальна стаття Дженніфер Кринін. Під редакцією Джеремі Жирар.
