Версия сайта для печати средствами CSS

Допустим, у нас есть серьезный бизнес-сайт, с серьезными клиентами. А серьезные люди, как правило, консервативны и с монитора читать не приучены. Они больше доверяют бумаге — там и подпись поставить можно если что и у нотариуса заверить… В общем, непременно нужна качественная версия сайта для печати.

Версия сайта для печати средствами CSS - один стиль для браузера:

Версия сайта для печати средствами CSS - один стиль для браузера

Код страницы:

Предположим, есть сайт, основной текст которого помещен в блок <div id="text"></div>, а небольшое меню в блок navigation. Обратите внимание, для страницы указано два независимых стиля: <style media="screen"> для браузеров и <style media="print"> для печатающих устройств. Экранный стиль — черный текст на светло-сером фоне и темно-серое меню навигации. В рамках данной заметки это не главное.

Стиль для печати описывает страницу по-своему. CSS-селектор означает, что мы выбираем все элементы страницы. Для них используется шрифт Times New Roman, белый фон и черный цвет шрифта — согласитесь, не в каждом офисе есть цветные лазерные принтеры. С помощью свойства display: none полностью удаляем с печатной версии блок навигации — на бумаге он бесполезен.

Версия сайта для печати средствами CSS - отдельный стиль страницы для принтера:

Версия сайта для печати средствами CSS - отдельный стиль страницы для принтера

В результате получается качественная версия страницы для печати. Благодаря CSS достичь такого результата чрезвычайно легко.

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Дата публикации:
Автор публикации: