Итан Маркотт - Отзывчивый веб-дизайн

Когда на сцене появились все эти браузеры для устройств с маленькими экранами, как, например, телефоны или планшеты, с ними пришли и проблемы. В соответствии со спецификацией решить эти проблемы несложно, нужно просто создать таблицу стилей для медиатипа handheld:

Проблемы скорее кроются в нас самих, по крайней мере, частично. На первых мобильных устройствах не было эффективно работающих браузеров, поэтому мы просто игнорировали их, разрабатывая вместо этого таблицы стилей для медиатипов screenили print. А когда такие браузеры появились, в Сети не было достаточно CSS-файлов типа handheld. В результате многие разработчики мобильных браузеров решили использовать таблицы стилей для медиатипа screen.

А растущий диапазон мобильных устройств еще больше усложняет дело. Сможет ли одна и та же таблица стилей решить все проблемы для iPhone и для телефона пятилетней давности?

К счастью, организация W3C включила в спецификацию CSS3 синтаксис медиазапросов, усовершенствовав методологию медиатипов. Медиазапросы позволяют не только ориентироваться на конкретный класс устройств, но и анализировать физические характеристики устройства, использующегося для отображения страницы ( http://bkaprt.com/rwd/27/).

Взгляните на следующий отрывок:

@media screen and (min-width: 1024px) {

body {

font-size: 100 %;

}

}

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

1. Он начинается с медиатипа ( screen), взятого из списка утвержденных медиатипов спецификации CSS2.1 ( http://bkaprt.com/rwd/26/).

2. После типа идет сам запрос в скобках: ( min-width: 1024px), который тоже можно разделить на две составляющие: название свойства ( min-width) и соответствующее значение ( 1024px).

Считайте, что медиазапросы просто проверяют ваш браузер. В процессе считывания таблицы стилей браузер получает вопрос от медиазапроса screen and (min-width: 1024px): относится ли он к медиатипу screen, и если да, то имеет ли он ширину области просмотра не меньше 1024 пикселей. Если браузер отвечает на оба вопроса положительно, вложенные в запрос стили отображаются, в противном случае браузер попросту игнорирует их и занимается своими делами.

Этот медиазапрос вписан в объявление @media, что позволило включить его непосредственно в таблицу стилей. Но вы можете также поместить запрос в элемент ссылки ( link), вставив его в атрибут media:

Кроме того, вы можете прикрепить его к инструкции @import:

@import url("wide.css") screen and (min-width: 1024px);

Лично я предпочитаю использовать @media, поскольку он хранит ваш код в отдельном файле, уменьшая количество внешних запросов браузера к серверу.

В принципе, неважно, куда вы впишете запрос, результат будет одинаковым: если браузер соответствует медиатипу и при этом выполняет условие, указанное в запросе, вложенные в запрос CSS выполняются, если нет – игнорируются.

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

1. В спецификации сказано, что каждое устройство имеет «область просмотра» (display area) и «площадь изображения» (rendering surface). Ну и что это такое? Переведем на наш язык: окно просмотра браузера – это область просмотра, а весь монитор – площадь изображения. На вашем ноутбуке областью просмотра будет окно браузера; площадью изображения – экран.

2. Чтобы задать определенные значения, некоторые характеристики могут принимать префиксы min– и max-. Например, вы можете вписать ( min-width: 1024px) и ( max-width: 1024px), чтобы задать область просмотра более или менее 1024 пикселей соответственно.

Все понятно? Великолепно. С этим разобрались, давайте рассмотрим характеристики, которые в соответствии со спе-цификацией мы можем использовать в наших запросах ( http://bkaprt.com/rwd/28/) ( табл. 4.1).

А еще мы можем связывать несколько запросов в цепочку, соединяя их словом and:

@media screen and (min-device-width: 480px) and (orientation: landscape) { … }

То есть мы можем задать несколько характеристик в одном запросе, выполняя тем самым более сложный анализ устройства, на котором просматривается наш дизайн.

Чувствуете себя королем мира? Тогда мне именно сейчас следует сказать, что не все браузеры, распознающие @media, поддерживают создание запросов для всех характеристик, указанных в спецификации.