Другими словами, как сделать наш дизайн более отзывчивым?
К счастью, Консорциум Всемирной паутины (World Wide Web Consortium, W3C) уже некоторое время занимается этой проблемой. Но чтобы лучше понять решение, которое в результате было представлено, обратимся к предыстории.
Первым шагом в решении проблемы стали медиатипы (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, который относится к определенному медиатипу, и игнорировать все остальные. И – в теории – это потрясающая идея.
Но теория – это, наверное, последнее, что нужно занятому по горло веб-дизайнеру.
Неправильное распределение типов
Когда на сцене появились все эти браузеры для устройств с маленькими экранами, как, например, телефоны или планшеты, с ними пришли и проблемы. В соответствии со спецификацией решить эти проблемы несложно, нужно просто создать таблицу стилей для медиатипа handheld:
<link rel="stylesheet" href="main.css" media="screen" />
<link rel="stylesheet" href="paper.css" media="print" />
<link rel="stylesheet" href="tiny.css" media="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:
<link rel="stylesheet" href="wide.css" media="screen and (min-width: 1024px)" />
Кроме того, вы можете прикрепить его к инструкции @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, поддерживают создание запросов для всех характеристик, указанных в спецификации.
Табл. 4.1. Характеристики устройств, тестируемых с использованием медиазапросов
Вот вам пример. Когда Apple выпустила свой первый iPad, он поддерживал медиазапрос orientation. Это значит, что вы могли написать запрос orientation: landscape или orientation: portrait для обслуживания устройства средствами CSS. Круто, да? К сожалению, iPhone не поддерживал запрос orientation до тех пор, пока несколько месяцев спустя не вышло обновление операционной системы. В то время как все устройства позволяли пользователю изменить ориентацию, браузер iPhone не понимал запросы на эту характеристику.
Мораль этой истории? Внимательно изучайте устройства и браузеры на предмет запросов характеристик, которые они поддерживают, и проверяйте их надлежащим образом.
