Печатаем по-умному или ещё один способ защиты информации
Сегодня мы поговорим о том, как сделать так, чтобы выводить на экран одну web-страницу, а при печати этой страницы на принтере результат был несколько иным. А делается это с помощью CSS.
В CSS есть одна очень полезная функция: Вы можете для одного и того же HTML-элемента указать разные способы отображения при печати и при показе в браузере. Для лучшего понимания рассмотрим следующий пример:
@media print {
p {
color: #ff0000;
}
}HTML-файл (index.html):
hello
Теперь при просмотре HTML-страницы в браузере Вы увидите слово Hello чёрного цвета. Однако попробуйте распечатать эту страницу на цветном принтере, и слово Hello окрасится в красный цвет.
Что будет, если мы снова откроем в браузере, а затем распечатаем HTML-файл? В браузере текст будет спокойно отображаться, а вот при печати пользователь получит чистый лист бумаги. Вот это и есть ещё один способ защиты информации.
Однако подчас такая защита не нужна. Посмотрим реальный пример: необходимо сделать на сайте страницу, для удобной распечатки материалов (без излишнего оформления). При этом где-то на web-странице будет кнопка «Печать». Так вот, я думаю, что стоит убрать её из печатной версии. Что делаем в CSS:
… здесь идёт текст, который должен быть распечатан …
Собственно, пример такой реализации Вы можете увидеть у меня на сайте: . На странице внизу видно строку "Печать :: Закрыть", которая не печатается, зато наверху страницы не видно строки "Статья скачана с web-портала Web-Build.Info", которая появится при печати.
Подчас, не обязательно использовать данную функцию CSS только для защиты информации. Порой необходимо некоторые данные при печати представить в несколько другом виде. Впрочем, как пользоваться – решайте сами.
Вот, в принципе и всё. Со всеми вопросами, комментариями, уточнениями и т. п. обращайтесь по e-mail: .