CSS3 Media Queries

Легкость перевоплощений

Давным-давно…

…разработчики поступали примерно так:

Обычная версия страницы

Lenta.Ru, обычная версия

Версия для печати

Lenta.Ru, версия для печати

Версия для мобильных устройств

Lenta.Ru, версия для мобильных устройств

Между тем…

…еще в HTML 4.01 и CSS2 были предусмотрены механизмы для создания аппаратно-зависимых стилей. Дело было в конце 1990-х.

Атрибут media в HTML

<link rel="stylesheet" href="reset.css" media="all">
<link rel="stylesheet" href="screen.css" media="screen, projection">
<link rel="stylesheet" href="print.css" media="print">

Правило @media в CSS

@media screen, projection {
	body {
		font-face: Arial, Helvetica, sans-serif;
		}
	}
@media print {
	body {
		font-face: Times, "Times New Roman", serif;
		}
	#menu {
		display: none;
		}
	}

Указание типа среды в директиве @import

@import url('screen.css') screen, projection;
@import url('print.css') print;

Правила применяются прозрачно для пользователя

Иными словами, никаких дополнительных действий от пользователя не требуется, а URL страницы не меняется. Конечно, кнопочки при желании можно сделать, но такое решение не имеет ничего общего с наследием темного прошлого:

Переключатель на сайте W3C

Типы сред в CSS2.1

Media Types Media Groups
continuous/paged visual/audio/speech/tactile grid/bitmap interactive/static
braille continuous tactile grid both
embossed paged tactile grid static
handheld both visual, audio, speech both both
print paged visual bitmap static
projection paged visual bitmap interactive
screen continuous visual, audio bitmap both
speech continuous speech N/A both
tty continuous visual grid both
tv both visual, audio bitmap both

Расширение привычного синтаксиса

Было:

@media screen {…}

Стало:

@media screen and (min-width: 640px) {…}

Построение выражений, часть 1

@media all and (color) {…}

@media (color) {…}

@media {…}

@media screen and (max-width: 640px) {…}

Построение выражений, часть 2

@media screen and (min-width: 640px) and (max-width: 1280px) {…}

@media handheld, screen and (max-width: 640px) {…}

@media not screen and (color) {…}

@media only screen and (color) {…}

Размеры, ориентация, соотношение сторон

Media Features Media Types Допускаются префиксы min и max Возможные значения
width, height visual, tactile Да <length>, например: 1024px, 20em; отражает ширину/высоту viewport или page box
device-width, device-height visual, tactile Да <length>, например: 1024px, 20em; отражает ширину/высоту экрана или листа
orientation bitmap Нет portrait или landscape
aspect-ratio, device-aspect-ratio bitmap Да <ratio>, например: 16/9 или 1280/720

Ширина и высота

width, height, device-width, device-height

Цветность

Media Features Media Types Допускаются префиксы min и max Возможные значения
color visual Да неотрицательное <integer>, например: 8; отражает количество бит на компоненту представления цвета (в случае неравномерного распределения соответствует наименьшему числу); 0 — устройство не является цветным
color-index visual Да неотрицательное <integer>, например: 16; отражает количество цветов в фиксированной палитре
monochrome visual Да неотрицательное <integer>, например: 8; отражает количество бит на пиксель; 0 — устройство не является монохромным

Разрешение, развертка, растр

Media Features Media Types Допускаются префиксы min и max Возможные значения
resolution bitmap Да <resolution>, например: 300dpi или 118dpcm
scan tv Нет progressive или interlaced
grid visual, tactile Нет 0 или 1

Текстовый режим

Lynx

Практический пример

Media Queries можно использовать уже сегодня.

Связанные спецификации, часть 1

Перечислим спецификации CSS, имеющие отношение к теме доклада.

Фундамент

Модули, непосредственно связанные с описанием представления для различных сред и устройств

Связанные спецификации, часть 2

Перечислим спецификации CSS, имеющие отношение к теме доклада.

Модули, описывающие новые механизмы создания layout

Связанные спецификации, часть 3

Перечислим спецификации CSS, имеющие отношение к теме доклада.

Модули, более интересные разработчикам устройств и браузеров, нежели веб-разработчикам

WebHiTech

Принимаем заявки на конкурс технологического совершенства сайтов русскоязычного сегмента Сети до  включительно: webhitech.ru.

WebHiTech

Спасибо за внимание!