Печатаем по-умному или еще один способ защиты информации

Евгений Неверов
eugene@web-build.info
web-build.info

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

В CSS есть одна очень полезная функция @media — вы можете для одного и того же HTML-элемента указать разные способы его отображения при печати и при показе в браузере. Для лучшего понимания рассмотрим следующий пример.

Пример 1

<html>
<head>
<style type="text/css">
@media screen {
p {
color: #000000; /* Черный цвет текста */
}
}

@media print {
p {
color: #ff0000; /* Красный цвет текста */
}
}
</style>
</head>
<body>
<p>Hello</p>
</body>
</html>

Теперь при просмотре HTML-страницы в браузере вы увидите слово «Hello» чёрного цвета. Однако попробуйте распечатать эту страницу на цветном принтере, и слово «Hello» окрасится в красный цвет.

Извлекаем выгоду

Теперь немного изменим стиль.

Пример 2

@media screen {
p {
display: block; /* Отображаем элемент */
}
}

@media print {
p {
display: none; /* Прячем содержимое */
}
}

Что будет, если мы снова откроем в браузере, а затем распечатаем HTML-файл? В браузере текст будет спокойно отображаться, а вот при печати пользователь получит чистый лист бумаги. Вот это и есть ещё один способ защиты информации.

Однако подчас такая защита не нужна. Посмотрим реальный пример: необходимо сделать на сайте страницу, для удобной распечатки материалов без излишнего оформления. При этом где-то на веб-странице будет кнопка «Печать». Так вот, я думаю, что стоит убрать её из печатной версии. Что делаем в CSS.

Пример 3

@media screen {
input {
display: block; /* Отображаем элемент */
}
}

@media print {
input {
display: none; /* Прячем элемент */
}
}

А ещё можно добавить текст о том, что «Статья скачана с сайта Mysite.Ru». Тут лучше сделать всё наоборот — в браузере её нет, а при печати — есть.

Пример 4

<html>
<head>
<style type="text/css">
@media screen {
input {
  display: block;
}

p.advert {
  display: none;
}
}

@media print {
input {
  display: none;
}

p.advert {
  display: block;
}
}
</style>
</head>
<body>

<p class="advert">Страница скачана с сайта Mysite</p>
: здесь идёт текст, который должен быть распечатан :
<input type="button" value="Печать" onClick="javascript:print(document);">

</body>
</html>

Подчас, не обязательно использовать данную функцию CSS только для защиты информации. Порой необходимо некоторые данные при печати представить в несколько другом виде. Впрочем, как пользоваться — решайте сами.

Учебник по HTML и CSS

HTML

CSS

Статьи

Полезное

Печатаем по-умному или еще один способ защиты информации

Извлекаем выгоду