Ничего не понятно, да? Давайте попробуем разобраться без нагромождения терминов.
Вы писали когда-нибудь стили для печати ? Тогда вы, наверное, знакомы с понятием разработки для различных видов медиа. Даже идеальное браузерное отображение не делает никакой разницы между десктопными браузерами и принтерами или между мобильными устройствами и голосовым браузером. Чтобы решить эту проблему, W3C создала список медиатипов для классификации каждого браузера или устройства по медиакатегориям. Медиатипы могут принимать значения:
all, braille, embossed, handheld, print, projection, screen, speech, tty
и
tv
.
С некоторыми
из этих медиатипов, как, например,
print, screen
или даже
projection
, вы уже работали. Некоторые другие –
embossed
(для брайлевских принтеров) или
speech
(для голосовых браузеров и интерфейсов) – встречаются впервые. Но все эти медиатипы созданы с одной целью: чтобы мы могли лучше проектировать дизайн для каждого типа браузера или устройства, просто загружая нужный CSS. Следовательно, устройство с экраном будет игнорировать CSS, созданный для медиатипа
print
, и наоборот. А для стилевых правил, которые применимы ко всем устройствам, в спецификации создана супергруппа
all
. На практике это означает правку
media
– атрибута ссылки:
<link rel="stylesheet" href="#" media="all" />
<link rel="stylesheet" href="#" media="screen" />
<link rel="stylesheet" href="#" media="print" />
А также создание блока
@media
в таблице стилей и его привязку к определенному медиатипу:
@media screen {
body {
font-size: 100 %;
}
}
@media print {
body {
font-size: 15 pt;
}
}
В любом случае спецификация предлагает браузеру определить, к какому медиатипу он относится. («Я десктопный браузер! Я отношусь к медиатипу
screen
», «Я пахну чернилами и тонером: я тип
print
», «Я браузер видеоконсоли: я тип
tv
» и т. д.) Загрузив страницу, браузер будет отображать только тот CSS, который относится к определенному медиатипу, и игнорировать все остальные. И – в теории – это потрясающая идея.
Но теория – это, наверное, последнее, что нужно занятому по горло веб-дизайнеру.
Неправильное распределение типов
Когда на сцене появились все эти браузеры для устройств с маленькими экранами, как, например, телефоны или планшеты, с ними пришли и проблемы. В соответствии со спецификацией решить эти проблемы несложно, нужно просто создать таблицу стилей для медиатипа
Проблемы скорее кроются в нас самих, по крайней мере, частично. На первых
мобильных устройствах не было эффективно работающих браузеров, поэтому мы просто игнорировали их, разрабатывая вместо этого таблицы стилей для медиатипов
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="#" media="screen and (min-width: 1024px)" />
Кроме того, вы можете прикрепить его к инструкции
@import
:
@import url("wide.css") screen and (min-width: 1024px);
Лично я предпочитаю использовать
@media
, поскольку он хранит ваш код в отдельном файле, уменьшая количество внешних запросов браузера к серверу.
В принципе, неважно, куда вы впишете запрос, результат будет одинаковым: если браузер соответствует медиатипу и при этом выполняет условие, указанное в запросе, вложенные в запрос CSS выполняются, если нет – игнорируются.