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

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

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

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

Пример 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>

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

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

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

Пример 2

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

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

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

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

Пример 3

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

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

А ещё можно добавляем контент о том, что «Статья скачана с с нашего сайта Site.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">Страница скачана с с нашего сайта Site.Ru</p>
: здесь идёт контент, который должен быть распечатан :
<input type="button" value="Печать" onClick="javascript:print(document);">

</body>
</html>

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

Статья опубликована: 04.10.2009

Последнее обновление: 27.10.2009