Печатаем по-умному или еще один способ защиты информации
Поговорим о том, как сделать так, чтобы выводить на экран одну веб-страницу, а при печати этой страницы на принтере результат был несколько иным. А делается это с помощью CSS.
В CSS есть одна очень полезная функция @media — вы можете для одного и того же HTML-элемента указать разные способы его отображения при печати и при показе в браузере. Для лучшего понимания рассмотрим следующий пример.
Пример 1
<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
p {
display: block; /* Отображаем элемент */
}
}
@media print {
p {
display: none; /* Прячем содержимое */
}
}
Что будет, если мы снова откроем в браузере, а затем распечатаем HTML-файл? В браузере текст будет спокойно отображаться, а вот при печати пользователь получит чистый лист бумаги. Вот это и есть ещё один способ защиты информации.
Однако подчас такая защита не нужна. Посмотрим реальный пример: необходимо сделать на сайте страницу, для удобной распечатки материалов без излишнего оформления. При этом где-то на веб-странице будет кнопка «Печать». Так вот, я думаю, что стоит убрать её из печатной версии. Что делаем в CSS.
Пример 3
input {
display: block; /* Отображаем элемент */
}
}
@media print {
input {
display: none; /* Прячем элемент */
}
}
А ещё можно добавить текст о том, что «Статья скачана с сайта Site.Ru». Тут лучше сделать всё наоборот — в браузере её нет, а при печати — есть.
Пример 4
<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.2005 | Последнее обновление: 27.10.2005 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
Олег Пчела
05.06.2006
Влад Мержевич
06.06.2006
Евгений Неверов
17.06.2006
Однако, суть в примере была такая же, как и в примере, так что потеряно немного.
Геннадий
18.07.2006
один помню и использовал <style type="text/css" media="all || media || print">, это здесь есть, а вот второй способ, даже наверное тогда третий, вспомнить не могу
Максим
03.09.2006
Влад Мержевич
04.09.2006
Васильев Михаил
18.10.2006
Никита
30.11.2006
CSS. Печатаем со стилем (www.umade.ru/log/2006/03/186.html)
Влад Мержевич
02.03.2007
Мао
04.04.2007
<style type="text/css">
<!--
@media screen {
.get_ { display: none}
}
@media print {
input { display:none;}
}
-->
</style>
...... пропущен кусок с body, созданием таблицы и т.д. .....
<td><span class="get_">здесь печатается текст, который не виден на экране</span><input type="text" name="name" value=""></td>
Юрий Терехов
27.04.2007
Влад Мержевич
02.05.2007
Александр
04.04.2008
webmix
27.05.2008