Без медиазапросов мы не сможем внести существенные изменения в визуальное представление сайта с помощью одних только CSS-таблиц. Они облегчают нам написание стабильных CSS-правил, упреждающих такие случаи, как портретная ориентация экрана, небольшие или большие размеры окна просмотра и многое другое.
Хотя подстраиваемая разметка может справляться с выдерживанием определенного дизайна в довольно широком диапазоне изменений с учетом всего диапазона размеров экрана, который мы надеемся охватить, бывают случаи, когда требуется более глубокий пересмотр разметки. Возможности такого пересмотра дают медиазапросы. Их нужно рассматривать в качестве основной условной логики для CSS.
Основная условная логика в CSS. Во всех настоящих языках программирования имеются средства, благодаря применению которых обслуживается одна или несколько возможных ситуаций. Обычно такие средства существуют в виде условной логики, примером которой может послужить инструкция if – else.
Если выражения, характерные для программирования, непривычны вашему глазу, не волнуйтесь: данная концепция довольно проста. Наверняка вы используете условную логику, когда в кафе просите друга заказать себе что-нибудь: «Если у них есть тройные шоколадные кексы, то я бы взял один, а если нет, то я бы не отказался от кусочка морковного пирога». Это простая условная инструкция с двумя возможными результатами, которых в данном случае вполне достаточно.
Когда я работал над этой книгой, в CSS еще не было возможности использования настоящей условной логики или свойств, присущих программированию. Циклы, функции, итерации и сложные математические вычисления все еще не вышли за пределы прерогативы CSS-процессоров (не помню, упоминал ли я о прекрасной книге на тему препроцессора Sass, которая называется Sass and Compass for Designers?). И тем не менее медиазапросы являются одним из механизмов CSS, позволяющих нам создавать основную условную логику. В том случае, когда при использовании медиазапроса складываются конкретно оговоренные в нем условия, в область видимости попадают именно те стили, которые в нем объявляются.
Пути создания возможностей программирования
Популярность препроцессоров CSS заставила призадуматься тех людей, которые работают над спецификациями CSS. Сейчас уже есть WD-спецификация, касающаяся CSS-переменных: http://www.w3.org/TR/css-variables/.
Но поддержка со стороны браузеров ограничивается Firefox, поэтому в настоящее время об их повсеместном использовании не может быть и речи.
Синтаксис медиазапроса
Так как же выглядят медиазапросы и, что более важно, как они работают?
Введите в конце любого файла CSS следующий код и посмотрите на связанную с ним веб-страницу. Как вариант, можете открыть пример из файла каталога example_02-01:
body {
background-color: grey;
}
@media screen and (min-width: 320px) {
body {
background-color: green;
}
}
@media screen and (min-width: 550px) {
body {
background-color: yellow;
}
}
@media screen and (min-width: 768px) {
body {
background-color: orange;
}
}
@media screen and (min-width: 960px) {
body {
background-color: red;
}
}
Теперь посмотрите на файл в браузере и измените размер окна. Фоновый цвет страницы будет меняться в зависимости от текущего размера окна просмотра. Вскоре работа кода с этим синтаксисом будет рассмотрена более подробно. Но в первую очередь важно узнать, как и где могут использоваться медиазапросы.
Медиазапросы в тегах link. Все, кому приходилось работать с CSS, начиная со второй версии (Version 2), знают о возможности указывать тип устройства (например, screen или print) применительно к таблице стилей с атрибутом media тега <link>. Рассмотрим следующий пример, который следует помещать в теги <head> своей разметки:
<link rel="style sheet" type="text/css" media="screen" href="screen-
styles.css">
Медиазапросы добавляют к возможности простого указания типа устройства возможность указания целевого назначения стилей на основе возможностей или характерных особенностей устройства. Их нужно рассматривать в качестве вопросов к браузеру. Если браузер даст положительный ответ, применяются стили, заключенные в медиазапрос. Если ответ будет отрицательным, эти стили применяться не будут. Вместо того чтобы просто спросить: «Это экран?» — все, что по максимуму можно сделать, используя только CSS2, — медиазапросы задают более сложные вопросы. С их помощью можно спросить: «Экран ли это и просматривается ли он в портретной ориентации?» Рассмотрим соответствующий пример:
<link rel="stylesheet" media="screen and (orientation: portrait)"
href="portrait-screen.css" />
Сначала с помощью выражения медиазапроса задается вопрос о типе (экран ли это?), а затем о свойстве (находится ли экран в портретной ориентации?). Таблица стилей portrait-screen.css будет применяться для любого экранного устройства с портретной ориентацией и игнорироваться для любых других вариантов устройств и свойств. Логику любого выражения медиазапроса можно поменять на противоположную, добавляя вначале отрицание not. Например, результат нашего предыдущего примера будет прямо противоположным, и файл с таблицей стилей будет применяться для всего, что не является экраном с портретной ориентацией:
<link rel="stylesheet" media="not screen and (orientation: portrait)"
href="portrait-screen.css" />
Объединение медиазапросов
В одной строке можно также выстроить сразу несколько выражений. Давайте, к примеру, расширим один из предыдущих фрагментов кода и вдобавок ко всему прочему ограничим применение файла устройствами, ширина окна просмотра которых составляет не менее 800 пикселов:
<link rel="stylesheet" media="screen and (orientation: portrait) and
(min-width: 800px)" href="800wide-portrait-screen.css" />
К тому же у нас может быть список медиазапросов. Файл будет применен, если будет получен положительный ответ на любой из перечисленных запросов. Если положительных ответов не окажется, файл применен не будет. Рассмотрим следующий пример:
<link rel="stylesheet" media="screen and (orientation: portrait) and
(min-width: 800px), projection" href="800wide-portrait-screen.css" />
В нем есть две интересные особенности. Во-первых, для разделения медиазапросов используются запятые. Во-вторых, следует заметить, что в скобках после ключевого слова projection отсутствует следующая пара «свойство — значение» и/или сочетание свойств и значений. Дело в том, что при отсутствии таких значений медиазапрос применяется ко всем устройствам, относящимся к данному типу медиаустройств. В нашем примере стили будут применяться ко всем проекторам.
совет
Следует иметь в виду, что для указания медиазапросов можно использовать любую единицу измерения длины, применяемую в CSS. Наиболее часто используются пикселы (px), но подойдут также em и rem. Чтобы дать более подробную информацию о качествах каждой единицы измерения, я привел расширенное толкование этой темы на ресурсе http://benfrain.com/just-use-pixels.
Таким образом, если нужна контрольная точка на 800 пикселах, но указанная в em, нужно просто разделить количество пикселов на 16. Например, 800 пикселов можно также указать как 50 em (800 / 16 = 50).
Медиазапросы с использованием @import
Для условной загрузки таблиц стилей в существующую таблицу стилей можно использовать также CSS-конструкцию @import. Например, следующий код импортирует таблицу стилей под названием phone.css при условии, что устройством является экран с максимальной шириной окна просмотра 360 пикселов:
@import url("phone.css") screen and (max-width:360px);
Следует помнить, что при использовании CSS-конструкции @import код добавляется к HTTP-запросам, что влияет на скорость загрузки, поэтому данный метод нужно использовать осмотрительно.
Медиазапросы в CSS
До сих пор медиазапросы включались нами в виде ссылок на CSS-файлы, а сами ссылки помещались в раздел <head></head> кода HTML и в виде инструкций @import. Но, скорее всего, нам захочется использовать медиазапросы внутри самих таблиц стилей. Например, если в таблицу стилей добавить следующий код, все элементы h1 приобретут зеленый цвет при условии, что ширина экрана устройства — не более 400 пикселов:
@media screen and (max-device-width: 400px) {
h1 { color: green }
}
Сначала в виде правила @media указывается, что нам нужен медиазапрос, затем задается желаемый тип, с которым требуется совпадение. В предыдущем фрагменте кода требуется применить правила, относящиеся только к экрану, но, к примеру, не к принтеру. Затем внутри скобок вводятся особенности запроса. После этого, как и в любом CSS-правиле, открываются фигурные скобки, внутри которых записываются требуемые стили.
Здесь, видимо, следует заметить, что в большинстве ситуаций указывать экран (screen) не нужно. Основное положение спецификации звучит следующим образом:
«Сокращенный синтаксис предлагается для тех медиазапросов, которые применяются ко всем типам медиаустройств; ключевое слово all может быть опущено (наряду со следующим за ним and). То есть если тип медиаустройства не задан конкретным образом, подразумевается настройка all».
