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

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

Прежде всего хотелось бы отметить, что две наши таблички тесно взаимосвязаны, поскольку спецификация 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 бит на каждую компоненту. При этом возможны 2⁸ = 256 градаций каждой составляющей цвета — всего 2²⁴ = 16 777 216 оттенков. Значение медиахарактеристики color в данном случае будет равно 8. Существуют «непропорциональные» цветовые режимы, например, 16-битное представление цвета, допускающее 2¹⁶ = 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, но нечто аналогичное сохраняется на бюджетных мобильных устройствах, в текстовых консолях у злых админов и на специализированных брайлевских дисплеях.

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

13.02.2012