Печатаем по-умному или еще один способ защиты информации
Поговорим о том, как сделать так, чтобы выводить на экран одну веб-страницу,
а при печати этой страницы на принтере результат был несколько иным. А делается
это с помощью 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;
}
} |
А ещё можно добавить текст о том, что «Статья скачана с сайта 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 только для защиты
информации. Порой необходимо некоторые данные при печати представить в несколько
другом виде. Впрочем, как пользоваться — решайте сами.
|