Печатаем сайты — о незаслуженно игнорируемом правиле @media
Сегодня я попытаюсь рассказать о том, почему на современных сайтах не должно быть ссылки «версия для печати».
Спецификация CSS 2.1 подразумевает, что наша страничка может выводится на следующие типы носителей:
all — стили будут работать для любого типа устройства по мере его способностей
braille — для вывода на устройства, выводящие информацию азбукой Брайля для слепых
embossed — то же что и braille, но не для устройств, а для физических страниц
handheld — говорит за себя — для устройств, ограниченных в разрешении и пропускной способности сети
print — тоже очевидно — для вывода на устройство печати постраничного материала (он же будет отображен в предпросмотре печати большинством современных броузеров)
projection — для презентаций, тоже постраничных
screen — для вывода на экран компьютера, где мы чаще всего сейчас и видим HTML-документы
speech — для вывода на «читалки»-синтезаторы (в CSS2 назывался «aural»)
tty — для любителей Lynx, проще говоря — для терминального вывода с ограничениями по форматированию
tv — для вывода на телевизор (низкое разрешение, проблемы с промоткой)
Мы остановимся на print и screen
Взять нужный стиль — обязанность броузера. Рассказать ему, какой стиль следует применять на том или ином носителе можно двумя способами:
с помошью правил @import и @media непосредственно в CSS-файле
или в HTML с помощью атрибута media тега link:
Таким образом, этот стиль будет работать для всех носителей.
Далее пишем «контейнер» print.
Первым делом, убираем то, что печатать не нужно:
Лучше сделать весь текст черным
Далее, в 99% случаев нужно убрать оформление ссылок
Нам не нужно выводить это на экран, поэтому пишем
У меня не было возможности проверить, смотрят ли мобильные броузеры на handheld.
Было бы интересно узнать. Это открывает не такие уж и новые, но почему-то незаслуженно игнорируемые возможности.
UPD: К сожалению, разные броузеры по-разному трактуют поля. А как они отностяся к правилам CSS относительно разбивки документа на страницы (да, там есть и такое) я опишу в следующий раз
Спецификация CSS 2.1 подразумевает, что наша страничка может выводится на следующие типы носителей:
all — стили будут работать для любого типа устройства по мере его способностей
braille — для вывода на устройства, выводящие информацию азбукой Брайля для слепых
embossed — то же что и braille, но не для устройств, а для физических страниц
handheld — говорит за себя — для устройств, ограниченных в разрешении и пропускной способности сети
print — тоже очевидно — для вывода на устройство печати постраничного материала (он же будет отображен в предпросмотре печати большинством современных броузеров)
projection — для презентаций, тоже постраничных
screen — для вывода на экран компьютера, где мы чаще всего сейчас и видим HTML-документы
speech — для вывода на «читалки»-синтезаторы (в CSS2 назывался «aural»)
tty — для любителей Lynx, проще говоря — для терминального вывода с ограничениями по форматированию
tv — для вывода на телевизор (низкое разрешение, проблемы с промоткой)
Мы остановимся на print и screen
Взять нужный стиль — обязанность броузера. Рассказать ему, какой стиль следует применять на том или ином носителе можно двумя способами:
с помошью правил @import и @media непосредственно в CSS-файле
@import url("style4print.css") print;
@media print {
описания стилей
}или в HTML с помощью атрибута media тега link:
<link rel="stylesheet" type="text/css" media="print, handheld" href="otherStyle.css" />
Хорошие новости!
Это работает во всей большой 4-ке (IE, Firefox, Safari, Opera). Думаю, должно работать и во всех броузерах, работающих на соответствующих движках.Что нам это дает?
- Нет необходимости делать особенную версию для печати и необычных устройств.
- Печать строго в соответствии с нашим представлением о прекрасном.
- Возможность заменять изображения на бОльщие или меньшие по разрешению и/или цветности. Например, вместо цветного вебдванольного логотипа можно зарядить черно-белый Gif с высоким разрешением или наоборот, уменьшенный его вариант.
- Чувство глубокого удовлетворения от проделанной работы.
Что это дает нашим посетителям?
Красивая печать, где ничего не убегает и ничего не пропадает с картинками правильного разрешения.Итак, с чего начать.
Оптимальнее всего, взять весь уже написанный стиль и поместить его в «контейнер» all.Таким образом, этот стиль будет работать для всех носителей.
Далее пишем «контейнер» print.
Первым делом, убираем то, что печатать не нужно:
- Рекламу (мы же получаем за клики а не за распечатки, правильно?)
- Навигацию
- Все остальное, что мы не хотим выводить на печать
@media print {
.class|#id, .class|#id_1, ... , .class|#id_n {
display: none;
}
}Лучше сделать весь текст черным
...
body, p, h1, ..., hn {
color: black;
background: white;
}
...Далее, в 99% случаев нужно убрать оформление ссылок
...
a, a:hover, a:active, a:visited {
text-decoration: none;
color: black;
}
...Кое-что поинтереснее
Можно не только убирать, но и добавлять элементы.
Например, на нашем сайте я сделал вывод даты распечатки, добавив в его конец параграф<p class="printOnly">Документ распечатан 28 августа 2008 года</p>
Нам не нужно выводить это на экран, поэтому пишем
@media screen {
.printOnly {
display: none;
}
}Можно заменить логотип на другой — с бóльшим разрешением.
@media all {
.logo, .logo_hr {
width: x;
height: y; //не забываем установить одинаковые размеры отображения,
повысив тем самым разрешение печати (естественно, логотип
для печати должен быть большим сам по себе)
}
}
@media screen {
.logo_hr {
display: none;
}
}
@media print {
.logo {
display: none;
}
}У меня не было возможности проверить, смотрят ли мобильные броузеры на handheld.
Было бы интересно узнать. Это открывает не такие уж и новые, но почему-то незаслуженно игнорируемые возможности.
UPD: К сожалению, разные броузеры по-разному трактуют поля. А как они отностяся к правилам CSS относительно разбивки документа на страницы (да, там есть и такое) я опишу в следующий раз
комментарии (90)