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

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

Механизм аппаратно-зависимых стилей, впервые описанный в CSS2 и отраженный с небольшими изменениями в CSS2.1, получил дальнейшее развитие в CSS3 — главным образом в рамках модуля Media Queries. Спецификация Media Queries не отменяет, а расширяет привычный синтаксис, рассмотренный в первой части нашей серии статей, за счет уточняющих условий. Так, вместо «классического»:

@media screen {…}

мы можем теперь записать:

@media screen and (min-width: 640px) {…}

CSS-правила, размещенные внутри скобок ({…}), во втором случае будут применяться на устройствах типа screen, но не во всех ситуациях, а только при соблюдении дополнительного условия: ширина области просмотра — не менее 640 пикселей. Браузеры, не поддерживающие CSS3 Media Queries, должны этот блок правил полностью проигнорировать.

Сказанное справедливо для всех ранее обсужденных вариантов синтаксиса (на основе конструкций @media и @import и HTML-атрибута media). Это относится ко всем дальнейшим примерам, в которых мы для единообразия будем использовать синтаксис на базе конструкции @media.

Построение выражений

В основе Media Queries лежат логические выражения, которые, в зависимости от особенностей среды или устройства вывода, могут принимать значения «истина» либо «ложь». В вышеприведенном фрагменте кода примером выражения является конструкция screen and (min-width: 640px). Соответствующий блок CSS-правил применяется только в том случае, если выражение истинно.

Принципы построения выражений имеет смысл рассмотреть на конкретных примерах.

От традиционного синтаксиса аппаратно-зависимых стилей, описанного в CSS2.1, конструкции Media Queries отличает использование ключевого слова and (олицетворяющего операцию логического «и»). Далее в скобках следует выражение с участием той или иной медиахарактеристики. Я взял на себя смелость так перевести на русский язык словосочетание media feature. Прошу учесть, что устоявшейся русскоязычной терминологии пока не существует (более того, и оригинал спецификации CSS3 Media Queries пока не утвержден в статусе рекомендации W3C, а значит, в нем возможны изменения), но имеющие место в природе явления ведь нужно как-то называть…

Медиахарактеристики по смыслу похожи на CSS-свойства (properties), только значения свойств мы задаем в CSS-правилах, а значения медиахарактеристик — проверяем внутри медиавыражений (собственно, примерно так можно перевести словосочетание media queries).

В нижеследующем примере проверяется, является ли устройство цветным:

@media all and (color) {…}

Ключевое слово all, относящееся ко всем типам сред и устройств, в данном случае можно было бы не указывать:

@media (color) {…}

И тип среды, и выражение с участием медиахарактеристики, и обе составляющие сразу можно пропустить. По идее, имеет право на существование вот такая конструкция:

@media {…}

Соответствующий блок правил будет применяться ко всем средам и устройствам.

Если опущено значение медиахарактеристики, подразумевается, что выражение истинно в том случае, если ее значение отлично от 0 (как в вышеприведенном примере в случае с color). Проверяемое значение можно определить и явно, причем многие медиахарактеристики допускают использование префиксов max- и min- (такой синтаксис выбран авторами спецификации для того, чтобы избежать использования знаков «меньше» — < и  «больше» — > во избежание гипотетически вероятных конфликтов с конструкциями HTML-разметки). Медиавыражение может включать более одного ключевого слова and:

@media screen and (min-width: 640px) and (max-width: 1280px) {…}

Запятая в медиавыражениях фактически выполняет роль логического «или»:

@media handheld, screen and (max-width: 640px) {…}

CSS-правила, относящиеся к этой конструкции, будут применяться ко всем устройствам типа handheld (вне зависимости от ширины) и к устройствам типа screen при ширине области просмотра до 640 пикселей.

Ключевое слово not используется как оператор логического отрицания:

@media not screen and (color) {…}

Выражение not screen and (color) будет истинным тогда, когда выражение screen and (color) будет ложным, и наоборот.

Наконец, ключевое слово only придумано специально для обеспечения совместимости с устаревшими браузерами, которые могут ошибочно интерпретировать конструкцию наподобие @media screen and (color) {…} как @media screen {…}. Вот пример его использования:

@media only screen and (color) {…}

Обзор медиахарактеристик

В первой части нашей серии статей мы привели таблицу, отражающую взаимосвязь между различными типами и группами сред и устройств вывода. Табличка та являлась, фактически, прямой цитатой из спецификации CSS2.1 (с точностью до того, что содержимое некоторых ячеек было переведено на русский).

Мне подумалось, что информацию о медиахарактеристиках, описанных в спецификации CSS3 Media Queries, разумно тоже организовать в виде таблички. Но, в отличие от таблицы из первой части нашего повествования, нижеприведенная «шпаргалка» — это уже не цитата из спецификации, а своего рода краткая выжимка. Полагаю, сей плод самодеятельности более нагляден, чем «простыня» текста, и, вероятно, им удобнее пользоваться в качестве повседневного справочного пособия, нежели оригиналом спецификации. Необходимые пояснения будут даны ниже.

Медиахарактеристики Группы или типы сред и устройств Допускаются ли префиксы max- и min-? Возможные значения
width, height visual, tactile Да <length>, например: 1024px, 20em; отражает ширину/высоту viewport или page box
device-width, device-height visual, tactile Да <length>, например: 1024px, 20em; отражает ширину/высоту экрана или листа
orientation bitmap Нет portrait или landscape
aspect-ratio, device-aspect-ratio bitmap Да <ratio>, например: 16/9 или 1280/720
color visual Да неотрицательное <integer>, например: 8; отражает количество бит на компоненту представления цвета (в случае неравномерного распределения соответствует наименьшему числу); 0 — устройство не является цветным
color-index visual Да неотрицательное <integer>, например: 16; отражает количество цветов в фиксированной палитре
monochrome visual Да неотрицательное <integer>, например: 8; отражает количество бит на пиксель; 0 — устройство не является монохромным
resolution bitmap Да <resolution>, например: 300dpi или 118dpcm
scan tv Нет progressive или interlace
grid visual, tactile Нет 0 или 1

Итак, обещанные пояснения.

Прежде всего хотелось бы отметить, что две наши таблички тесно взаимосвязаны, поскольку спецификация Media Queries, как и другие модули CSS3, строится на фундаменте CSS2.1. В вышеприведенной табличке вы видите множественные ссылки на описания типов значений (<length> — расстояние, <integer> — целое число) и толкования ключевых понятий (viewport — область просмотра, page box — пространство страницы), определенных в рамках спецификации CSS2.1. Типы значений <ratio> (соотношение) и <resolution> (разрешающая способность) определяются уже непосредственно в спецификации CSS3 Media Queries.

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

Теперь поясним подробнее предназначение каждой из медиахарактеристик.

Характеристики width и height отражают, соответственно, ширину и высоту области просмотра (в случае непрерывных — continuous — сред вывода, таких как экран монитора) или пространства страницы (в случае сред с постраничным разбиением — paged, таких как лист бумаги при распечатке). Допустимые проверяемые значения медиахарактеристик width и height аналогичны разрешенным значениям одноименных CSS-свойств (примеры приведены в табличке).

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

Медиахарактеристики device-width и device-height принимают значения ширины и высоты устройства (например, экрана) в целом.

Характеристика orientation (ориентация) подразумевает два значения: portrait (портретная) или landscape (ландшафтная). Первое принимается в том случае, когда значение медиахарактеристики height больше либо равно значению width, второе — в противоположной ситуации.

Медиахарактеристики aspect-ratio и device-aspect-ratio выражают соотношение сторон соответственно области просмотра и устройства в целом. Если точнее, aspect-ratio отражает отношение width к height, а device-aspect-ratio — отношение device-width к device-height. В качестве значения могут выступать два положительных целых числа, разделенных символом косой черты. Абсолютные значения числителя и знаменателя получившейся дроби не играют роли: примеры, приведенные в нашей таблице, совершенно эквивалентны.

Плавно переходим к цветовым характеристикам. Так, color отражает глубину цвета в битах на каждую компоненту представления цвета. Например, на экране любой цвет формируется как смесь трех составляющих: красной, зеленой и синей — в определенных пропорциях. Подавляющее большинство современных видеокарт оперируют 24-битным представлением цвета — по 8 бит на каждую компоненту. При этом возможны 28 = 256 градаций каждой составляющей цвета — всего 224 = 16 777 216 оттенков. Значение медиахарактеристики color в данном случае будет равно 8. Существуют «непропорциональные» цветовые режимы, например, 16-битное представление цвета, допускающее 216 = 65 536 оттенков. Поскольку 16 бит нельзя равномерно распределить по трем каналам, красной и синей компонентам выделяется по 5 бит, а зеленой — 6 бит. Значение медиахарактеристики color при таком раскладе будет равно 5 (согласно букве спецификации, используется наименьшее число). Если устройство вывода вообще не является цветным, медиахарактеристика color принимает значение 0.

Медиахарактеристика color-index применима к устройствам вывода с фиксированной палитрой. Примером такого устройства из далекого прошлого может являться видеосистема EGA, допускавшая вывод не более 16 цветовых оттенков одновременно. В современном мире подобные решения могут применяться в недорогих мобильных и разного рода специализированных устройствах. Принимаемое медиахарактеристикой значение отражает количество цветов в палитре.

Медиахарактеристика monochrome передает глубину цвета в битах на пиксель в том случае, если устройство является монохромным. Если же устройство не монохромное, а цветное, эта медиахарактеристика примет значение 0.

Характеристика resolution отражает разрешающую способность устройства вывода в точках растра на дюйм (dots per inch, dpi) или на сантиметр (dots per centimeter, dpcm). Примеры значений, приведенные в нашей таблице, эквивалентны.

Медиахарактеристика scan является довольно специфичной, будучи применимой только к устройствам типа tv. Эта характеристика отражает вид развертки, используемой таким устройством, и подразумевает два возможных значения: progressive (последовательная) или interlace (чересстрочная).

Наконец, последняя из описанных в спецификации Media Queries медиахарактеристик, grid, используется для определения того, использует ли устройство жесткую сетку знакомест для вывода символов фиксированного размера или же является растровым. На персоналках первое когда-то давно называлось «текстовым режимом» в противовес «графическому». Текстовый режим работает быстрее и требует меньше памяти, но не позволяет выводить произвольные геометрические объекты. Большинство современных пользователей могут наблюдать текстовый режим разве что в момент включения компьютера при инициализации BIOS, но нечто аналогичное сохраняется на бюджетных мобильных устройствах, в текстовых консолях у злых админов и на специализированных брайлевских дисплеях.

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