С удобством от устройства к устройству. Часть 1
В прошлом году на конференциях Web Standards Days осенне-зимнего сезона я выступил с докладом о красивой и полезной технологии — Media Queries. Это модуль CSS3, находящийся в стадии Candidate Recommendation. (К слову, о статусах спецификаций W3C и о тернистых путях развития CSS я попытался доступно рассказать в недавней статье для «Энциклопедии сайтостроения», популярного проекта компании RU-CENTER.)
Доклад — это, конечно, хорошо (особенно когда есть видеозапись и презентация с практическим примером), но в ходе получасового выступления невозможно охватить все важные детали и нюансы. Поэтому возникла идея написать по мотивам доклада обстоятельную статью для проекта WebHiTech в нескольких частях. Обещаем затем продолжить публикацию статей и заметок о различных технологиях «переднего края» развития CSS.
Проблема
У веб-разработчиков часто возникает необходимость обеспечить существенно различающиеся версии представления одного и того же контента для различных сред и устройств вывода информации — будь то относительно большой экран монитора настольного компьютера либо ноутбука, маленький экран смартфона либо коммуникатора, лист бумаги при распечатке документа на принтере или же что-то другое.
С десяток лет тому назад в порядке вещей было решение проблемы «в лоб». Для каждого требуемого варианта внешнего облика создавалась отдельная страница с самостоятельным URL. Получалось нечто вроде такого:
- http://lenta.ru/articles/2011/09/28/url/ — экранная версия;
- http://lenta.ru/articles/2011/09/28/url/_Printed.htm — печатная версия;
- http://pda.lenta.ru/articles/2011/09/28/url/ — мобильная версия;
- http://old.lenta.ru/articles/2011/09/28/url/ — версия в старом оформлении.
Перечисленные четыре адреса — вполне реальные URL, ссылающиеся на одну и ту же статью. Которая, что символично, сама по себе посвящена тематике URL. (Это ни в коем случае не попытка «наезда» на уважаемую мной «Ленту.Ру» — в 2004 году, когда Студией Лебедева был воплощен нынешний дизайн интернет-издания, такой подход являлся вполне себе нормой.)
Чем же плоха подобная ситуация?
Кроме чисто философской проблемы размножения лишних сущностей без необходимости, упомянутый подход таит в себе серьезные недостатки с точки зрения потребительских качеств сайта, удобства его использования.
Предположим, мы перешли на страницу, оптимизированную для распечатки, по ссылке из выдачи поисковика. Что мы видим? Статью в минималистском оформлении без привычной навигации. Не слишком подкованного пользователя это может дезориентировать, да и вполне квалифицированному пользователю придется предпринимать лишние действия для того, чтобы открыть версию страницы, комфортно воспринимаемую при чтении с экрана (или, например, чтобы перейти на главную страницу сайта).
Не меньший дискомфорт вызовет и загрузка полноэкранной версии сайта с мобильного устройства — причем не только с точки зрения внешнего вида страниц, но еще и с точки зрения экономии трафика.
Давнее решение
Между тем, адекватное решение проблемы предложено W3C задолго до пресловутого редизайна «Ленты.Ру» в 2004 году. Механизм для задания аппаратно-зависимых стилей описан в спецификациях HTML 4.01 и CSS2, утвержденных в качестве рекомендаций консорциума в и годах соответственно, то есть более 10 лет тому назад! IE6, выпущенный , уже частично поддерживал эти нововведения. Во всяком случае, в эпоху IE6 уже можно было создавать сайты, на которых хотя бы печатная версия представления контента страниц формировалась бы автоматически и прозрачно для пользователя.
Синтаксис HTML 4.01 и CSS2 предусматривал три способа подключения аппаратно-зависимых стилей. Первый способ — использование HTML-атрибута media
:
<link rel="stylesheet" href="reset.css" media="all">
<link rel="stylesheet" href="screen.css" media="screen, projection">
<link rel="stylesheet" href="print.css" media="print">
Второй способ — использование конструкции @media
в CSS-коде:
@media screen, projection {
body {
font-face: Arial, Helvetica, sans-serif;
}
}
@media print {
body {
font-face: Times, "Times New Roman", serif;
}
#menu {
display: none;
}
}
Приведенный фрагмент кода наглядно демонстрирует, каким образом можно сделать так, чтобы экранная версия представления контента использовала рубленый шрифт, а печатная — антикву, и, кроме того, чтобы в печатном варианте представления не показывался блок, содержащий меню навигации по сайту.
Наконец, третий способ — указание типа среды или устройства в рамках конструкции @import
:
@import url('screen.css') screen, projection;
@import url('print.css') print;
Выбирайте на вкус любой из перечисленных способов — все они остаются актуальными.
Важно понять, что правила, индивидуальные для различных сред и устройств вывода, применяются прозрачно для пользователя. Иными словами, никаких дополнительных действий от пользователя не требуется, а URL соответствующей страницы не меняется.
Поздняя ревизия
Фактической заменой CSS2 стала спецификация CSS2.1, утвержденная в качестве рекомендации W3C . Более 12 лет потребовалось на то, чтобы выстроить надежный, прочный и непротиворечивый фундамент для всех последующих спецификаций CSS. Как известно, единой спецификации CSS3 не существует. Третий уровень каскадных таблиц стилей, в отличие от более ранних, описывается несколькими десятками параллельно развивающихся относительно независимых модулей, каждый из которых представляет собой самостоятельную спецификацию, в достаточной мере краткую и компактную. В отличие от модели, сложившейся в ранние годы развития CSS, никакие модули CSS3 не определяют заново того же, что уже было описано в спецификации CSS2.1, будучи выстраиваемыми на твердой основе последней.
CSS2.1 по сути своей — это тщательная ревизия спецификации CSS2. Многие разделы CSS2 перекочевали в CSS2.1 без изменений или с небольшими исправлениями. Что касается механизма аппаратно-зависимых стилей, в CSS2.1 упразднен (точнее, объявлен как deprecated) определенный в CSS2 тип среды aural
, и вместо него зарезервирован новый тип среды speech
, относящийся к речевым устройствам вывода. Свойства, применимые к данному классу устройств, описываются «с чистого листа» в CSS3-модуле Speech, находящемся пока в стадии рабочего черновика (Working Draft), прошедшего этап Last Call, но пока не перешедшего в фазу Candidate Recommendation. По всей видимости, определение набора свойств для речевых сред в рамках спецификации CSS2 было излишне преждевременным.
В остальном список сред и устройств вывода, определенный в рамках спецификации CSS2, не претерпел изменений в CSS2.1:
braille
— тактильные дисплеи Брайля с возможностью обратной связи;embossed
— печатные материалы с постраничной разбивкой, использующие рельефную азбуку Брайля;handheld
— мобильные устройства (обычно с маленьким экраном и ограниченной пропускной способностью канала связи);print
— печатные материалы с постраничной разбивкой; документы, отображаемые на экране в режиме предварительного просмотра перед печатью;projection
— постраничные презентации, демонстрируемые, например, при помощи проектора;screen
— экраны настольных компьютеров и ноутбуков (преимущественно цветные и относительно большого размера);speech
— речевые синтезаторы;tty
— терминальные устройства, предназначенные для вывода символов фиксированных размеров;tv
— устройства, подобные телевизорам (с цветными экранами относительно низкого разрешения, ограниченной прокруткой и возможностью воспроизведения звука).
CSS2.1 также определяет несколько групп сред и устройств с классификацией по характерным признакам:
- continuous (непрерывные) или paged (с постраничной разбивкой);
- visual (визуальные), audio (звуковоспроизводящие), speech (речевые) или tactile (тактильные);
- grid (с сеткой знакомест для символов фиксированных размеров) или bitmap (растровые);
- interactive (предполагающие взаимодействие с пользователем, обратную связь, возможность ввода) или static (не предполагающие таких возможностей).
Ключевое слово all
относится ко всем возможным средам и устройствам.
Детали классификации
Нижеследующая сводная таблица отражает взаимосвязь между типами и группами сред и устройств вывода.
Тип среды или устройства | Принадлежность к группам | |||
---|---|---|---|---|
continuous или paged | visual, audio, speech или tactile | grid или bitmap | interactive или static | |
braille |
continuous | tactile | grid | любая из двух |
embossed |
paged | tactile | grid | static |
handheld |
любая из двух | visual, audio, speech | любая из двух | любая из двух |
print |
paged | visual | bitmap | static |
projection |
paged | visual | bitmap | interactive |
screen |
continuous | visual, audio | bitmap | любая из двух |
speech |
continuous | speech | не применимо | любая из двух |
tty |
continuous | visual | grid | любая из двух |
tv |
любая из двух | visual, audio | bitmap | любая из двух |
Подчеркну, что все, о чем мы говорили до сего момента, описано в спецификации CSS2.1 и давно известно более-менее опытным веб-разработчикам. К обсуждению новых возможностей, предоставляемых CSS3, мы перейдем в следующей части нашей серии статей.