Печатаем по-умному или еще один способ защиты информации - Форум
( Новые сообщения ·Правила форума ·Поиск ·RSS )
Страница 1 из 11
Модератор форума: Ezhik 
Форум » Статьи о CSS » Рецепты CSS » Печатаем по-умному или еще один способ защиты информации
Печатаем по-умному или еще один способ защиты информации
EvgenyДата: Четверг, 25.02.2010, 12:59 | Сообщение # 1
Контр-Адмирал
Группа: Администраторы
Сообщений: 287
Статус:
Поговорим о том, как сделать так, чтобы выводить на экран одну веб-страницу, а при печати этой страницы на принтере результат был несколько иным. А делается это с помощью CSS.

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

[small]Пример 1[/small]

Code
<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» окрасится в красный цвет.

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

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

[small]Пример 2[/small]

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

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

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

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

[small]Пример 3[/small]

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

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

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

[small]Пример 4 [/small]

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

 
Форум » Статьи о CSS » Рецепты CSS » Печатаем по-умному или еще один способ защиты информации
Страница 1 из 11
Поиск:

Статистика Форума
Уважаемые пользователи
Популярные темы
Недавно обновленные темы
Evgeny Репутация [ 122 ]
akkemir22 Репутация [ 113 ]
Kuks64 Репутация [ 49 ]
Gavrik Репутация [ 48 ]
Anatoliy03 Репутация [ 37 ]
MiRel Репутация [ 33 ]
hius Репутация [ 23 ]
mVizio Репутация [ 19 ]
ewa69 Репутация [ 16 ]
straik67 Репутация [ 14 ]
Прочие [ 10 ]
О програмистах и Веб-Мастерах [ 6 ]
Про детей [ 6 ]
Про автомобилистов [ 5 ]
Про женщин [ 3 ]
Блондинка сдает на права ! (МЕГА ЖЕСТЬ) [ 2 ]
Про новых русских [ 2 ]
ВАЗ-2107 1000 лошадей [ 2 ]
Новый вид ББ-кодов на вашем сайте [ 2 ]
Про компьютеры [ 1 ]
Игры на телефон бесплатно [ 0 ]
Лучшее онлайн казино. Как обыграть казино? [ 0 ]
Инвест-Проект. Прибыль каждые 5 мин. [ 1 ]
Финансовая Взаимопомощь. Каждые 24ч получаете % [ 0 ]
Играть и зарабатывать онлайн [ 0 ]
Новый Топ пользователей с аватарами для Ucoz [ 0 ]
Простой и красивый вид формы опроса [ 0 ]
Красивый информер "кто нас сегодня посетил" для Ucoz [ 0 ]
Flash радио для сайта [ 0 ]
Заработок на играх [ 0 ]