Каждому по потребностям

Многие читатели, судя по поступающим отзывам, соскучились по старым добрым колонкам практической направленности, сопровождающимся примерами на сайте Web-Anatomy.Ru. Иные, небось, и забыли уже про этот адрес — шутка ли, последний выпуск «Веб-анатомии…» с практическим приложением вышел 5 декабря прошлого года.

Я, признаться, и сам соскучился. Так что с удовольствием восполняю образовавшийся пробел. Сегодняшняя колонка всецело и полностью посвящена разговору о создании обособленных версий представления контента для различных классов устройств вывода.

CSS2 позволяет нам гибко управлять представлением содержимого HTML-документов совершенно прозрачно с точки зрения пользователя. Иными словами, различные варианты представления данных (адаптированные для отображения информации на экране настольного компьютера или ноутбука, на экране «наладонника» или смартфона, на листе бумаги при выводе на печать и т. д.) благодаря CSS могут применяться автоматически, избавляя посетителей сайта от необходимости искать на страницах ссылки или кнопки вроде «Версия для печати» или «Версия для КПК». При этом, что немаловажно, URL документа остается постоянным.

Если говорить точнее, то в CSS2 определено 9 типов сред и устройств вывода информации, к каждому из которых можно применить индивидуальный набор правил, что и дает возможность создавать аппаратно-зависимые стили. Вот, собственно, все эти типы:

• aural — речевые синтезаторы (только CSS2; в последующих версиях CSS, начиная с 2.1, по ряду причин вместо aural надлежит использовать ключевое слово speech);
• braille — тактильные дисплеи Брайля;
• embossed — печатные материалы с постраничной разбивкой, использующие рельефную азбуку Брайля;
• handheld — небольшие по размеру экраны мобильных устройств;
• print — печатные материалы с постраничной разбивкой; документы, отображаемые на экране в режиме предварительного просмотра перед печатью;
• projection — постраничные презентации, к примеру, демонстрируемые при помощи проектора;
• screen — цветные дисплеи высокого разрешения (прежде всего речь идет о «полноценных» экранах настольных компьютеров и ноутбуков);
• tty — терминальные устройства, предназначенные для вывода символов фиксированных размеров (вспомните, например, Lynx — браузер, который работает в текстовом режиме);
• tv — устройства с цветными экранами низкого разрешения, ограниченной прокруткой и возможностью воспроизведения звука (наподобие WebTV, некогда популярного на Западе).

Есть еще ключевое слово all, соответствующее всем без исключения средам и устройствам.

Многие CSS-свойства применимы далеко не ко всем типам устройств вывода. Большинство из тех свойств, которые привычны практикующим веб-разработчикам (font, color, background и т. д.), актуальны только для визуальных устройств.

Каким же образом заставить все это работать?

Способов существует множество. Можно, например, определить атрибут media со значением, соответствующим одному из вышеприведенных ключевых слов, для тега <link>, связывающего веб-страницу с внешним листом стилей, либо для тега <style>, внедряющего в код HTML-документа внутренний лист стилей. (Один документ вполне может содержать несколько элементов <style>…</style>.)

Вот так, например:

<link rel="stylesheet" href="printer.css" type="text/css" media="print" />

Другой способ — использование для описания аппаратно-зависимого фрагмента листа стилей директивы @media непосредственно в CSS-коде:

<style type="text/css">
...
@media screen
{
  ...
}
...
</style>

Наконец, похожим образом можно задействовать директиву @import, осуществляющую вставку в данный лист стилей внешнего фрагмента:

<style type="text/css">
...
@import url("pocketpc.css") handheld;
...
</style>

Но тут будьте внимательны — Internet Explorer, включая даже шестую версию, не восприимчив к последнему варианту синтаксиса. Подобную директиву распрекрасный браузер от Microsoft попросту проигнорирует… Саму по себе директиву @import (без последующего ключевого слова, определяющего, к какому классу устройств она должна применяться) IE поддерживает исправно.

Вообще говоря, тег <link> является более универсальным средством связи веб-страницы с внешним листом стилей, нежели директива @import — последнюю не понимают многие устаревшие на сегодняшний день браузеры, не поддерживающие CSS2 в полноте, например, Netscape 4. В то же время, директива @import может оказаться полезной как раз для того, чтобы скрыть от подобных пользовательских агентов те правила, которые могут быть ими, скажем так, неверно истолкованы.

Netscape 4, однако, уже позавчерашний день. Пример аппаратно-зависимой страницы, который мы рассматриваем сегодня в качестве практического приложения, исправно работает в IE5, IE6, Firefox, Opera 5—7 и наверняка много где еще, а вот в Netscape 4 он отображается так, будто бы в эпоху HTML 2.0 — то есть без какого бы то ни было «лишнего» оформления.

* * *

«Веб-анатомия…», а еще «Чай по четвергам с Шумаковым» и «Субботний блик науки» вышли в финал конкурса «РОТОР»-2005, проводимого ЕЖЕ-сообществом. Свою работу я выдвинул в номинации «Сайт информационных технологий и телекоммуникаций». Конкурс еще не завершился — на предстоящей неделе нас ждет нелегкая борьба с весьма достойными и сильными соперниками, а также с жестоким и коварным врагом — кандидатом «Против всех». Своими впечатлениями о конкурсе я поделюсь в следующий раз, когда «РОТОР» завершится — чтобы не спугнуть удачу. ;-)

17.04.2005

Теги: CSS блочная верстка веб-стандарты доступность контента