С удобством от устройства к устройству. Часть 1

Артемий Ломов

В прошлом году на конференциях Web Standards Days осенне-зимнего сезона я выступил с докладом о красивой и полезной технологии — Media Queries. Это модуль CSS3, находящийся в стадии Candidate Recommendation. (К слову, о статусах спецификаций W3C и о тернистых путях развития CSS я попытался доступно рассказать в недавней статье для «Энциклопедии сайтостроения», популярного проекта компании RU-CENTER.)

Доклад — это, конечно, хорошо (особенно когда есть видеозапись и презентация с практическим примером), но в ходе получасового выступления невозможно охватить все важные детали и нюансы. Поэтому возникла идея написать по мотивам доклада обстоятельную статью для проекта WebHiTech в нескольких частях. Обещаем затем продолжить публикацию статей и заметок о различных технологиях «переднего края» развития CSS.

Проблема

У веб-разработчиков часто возникает необходимость обеспечить существенно различающиеся версии представления одного и того же контента для различных сред и устройств вывода информации — будь то относительно большой экран монитора настольного компьютера либо ноутбука, маленький экран смартфона либо коммуникатора, лист бумаги при распечатке документа на принтере или же что-то другое.

С десяток лет тому назад в порядке вещей было решение проблемы «в лоб». Для каждого требуемого варианта внешнего облика создавалась отдельная страница с самостоятельным 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, мы перейдем в следующей части нашей серии статей.

Продолжение следует.