Отзывчивый веб-дизайн.

Знакомьтесь: медиатипы.

Первым шагом в решении проблемы стали медиатипы (media types), часть спецификации CSS2 (http://bkaprt.com/rwd/24/). Вот как они первоначально описывались:

Иногда таблицы стилей для различных медиатипов могут иметь одинаковое свойство, но требовать разных значений для этого свойства. Например, свойство font-size можно использовать как для монитора, так и для вывода документа на печать. Эти два медиатипа отличаются друг от друга и требуют разных значений для одного и того же свойства; документ обычно имеет больший шрифт на мониторе, чем на бумаге. Поэтому это нужно отобразить в таблице стилей или в разделе таблицы, применяемой к определенным медиатипам.

Ничего не понятно, да? Давайте попробуем разобраться без нагромождения терминов.

Вы писали когда-нибудь стили для печати (http://bkaprt.com/rwd/25/)? Тогда вы, наверное, знакомы с понятием разработки для различных видов медиа. Даже идеальное браузерное отображение не делает никакой разницы между десктопными браузерами и принтерами или между мобильными устройствами и голосовым браузером. Чтобы решить эту проблему, W3C создала список медиатипов (http://bkaprt.com/rwd/26/) для классификации каждого браузера или устройства по медиакатегориям. Медиатипы могут принимать значения: all, braille, embossed, handheld, print, projection, screen, speech, tty и tv.

С некоторыми из этих медиатипов, как, например, print, screen или даже projection, вы уже работали. Некоторые другие – embossed (для брайлевских принтеров) или speech (для голосовых браузеров и интерфейсов) – встречаются впервые. Но все эти медиатипы созданы с одной целью: чтобы мы могли лучше проектировать дизайн для каждого типа браузера или устройства, просто загружая нужный CSS. Следовательно, устройство с экраном будет игнорировать CSS, созданный для медиатипа print, и наоборот. А для стилевых правил, которые применимы ко всем устройствам, в спецификации создана супергруппа all. На практике это означает правку media-атрибута ссылки:

<link rel="stylesheet" href="global.css" media="all" />

<link rel="stylesheet" href="main.css" media="screen" />

<link rel="stylesheet" href="paper.css" media="print" />

А также создание блока @media в таблице стилей и его привязку к определенному медиатипу:

@media screen {

body {

font-size: 100 %;

}.

}.

@media print {

body {

font-size: 15 pt;

}.

}.

В любом случае спецификация предлагает браузеру определить, к какому медиатипу он относится. («Я десктопный браузер! Я отношусь к медиатипу screen», «Я пахну чернилами и тонером: я тип print», «Я браузер видеоконсоли: я тип tv» и т. д.) Загрузив страницу, браузер будет отображать только тот CSS, который относится к определенному медиатипу, и игнорировать все остальные. И – в теории – это потрясающая идея.

Но теория – это, наверное, последнее, что нужно занятому по горло веб-дизайнеру.