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

В любом случае спецификация предлагает браузеру определить, к какому медиатипу он относится. («Я десктопный браузер! Я отношусь к медиатипу 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 синтаксис медиазапросов, усовершенствовав методологию медиатипов. Медиазапросы позволяют не только ориентироваться на конкретный класс устройств, но и анализировать физические характеристики устройства, использующегося для отображения страницы .

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

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

body {

font-size: 100 %;

}

}

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

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

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). Ну и что это такое? Переведем на наш язык: окно просмотра браузера – это область просмотра, а весь монитор – площадь изображения. На вашем ноутбуке областью просмотра будет окно браузера; площадью изображения – экран.