Кратко

  • Первый рабочий проект W3C о Media Queries опубликован 4 апреля 2001 года. HTML4 и CSS2 уже различали screen и print; проект позволил точнее спрашивать о свойствах среды.
  • 8 июля 2002 года вышла кандидатская рекомендация, 19 июня 2012 года — рекомендация W3C. Условия по ширине, высоте и цвету стали способом выбирать оформление для единого текста.

Статья в три колонки отлично чувствовала себя в большом редакционном окне. Заголовок расправил плечи, меню не мешало, фотография знала своё место. Редактор потянул границу окна — и колонкам стало тесно, словно пассажирам автобуса с тремя чемоданами. Затем пришёл принтер и поинтересовался, зачем бумаге навигация для щелчков. С самой статьёй всё было в порядке. Не подошёл костюм.

Первый рабочий проект W3C от 4 апреля 2001 года описывал уже существующее различие. HTML4 и CSS2 умели отделять экран от печати через типы носителя вроде screen и print. Но ярлык «экран» объединял и широкое редакционное окно, и тесное окошко читателя. Заказывать пиджак со словами «на человека» можно, но рукава получатся непредсказуемыми.

Новые запросы добавили мерки. В условии могли участвовать ширина, высота, цвет и разрешение. Через min-width автор указывал пространство, нужное раскладке; через max-width выбирал вариант для тесного окна. Были и примеры для ширины печатной страницы. Браузер знает среду читателя, автор задаёт проверку и правила оформления. Текст статьи остаётся тем же, пока его оформление подстраивается под место.

В широком окне текст, снимок и боковая колонка стоят рядом. При сужении колонка уходит под статью, чтобы заголовок снова мог дышать. При печати меню уступает место бумажной полосе. Редакция не пишет три версии каждого абзаца. Она задаёт разные способы расположить одну и ту же работу журналиста.

Кандидатская рекомендация от 8 июля 2002 года продвинула модель в процессе стандартизации. Статус «кандидатская» обозначает этап документа, а не массовый выпуск одинаковых браузеров в тот день. Центральная мысль сохранилась: условия выбора внешнего вида должны быть точнее, чем грубое деление на экран и бумагу.

Рекомендация W3C от 19 июня 2012 года закрепила устройство запросов. Тип носителя можно сочетать с нулём или несколькими выражениями о свойствах среды. Ширина, высота и цвет входят в их число; примеры с min-width и max-width описывают диапазоны, а для печати рассматривается ширина страницы. Хорошая граница смены раскладки проходит там, где тексту становится тесно. Название модного устройства — плохой портной: завтра витрина сменится.

Есть важная подробность о числе px. В запросах это пиксели CSS, а не физические светящиеся точки дисплея. Экран с большой плотностью точек может дать макету привычную ширину в пикселях CSS. Если колонка не помещается, полезно смотреть на доступную макету ширину, а не на внушительную цифру в рекламе устройства.

Документ 2012 года описывает также only, not и обращение с неизвестными свойствами. Он ожидает, что пользовательский агент пересмотрит запросы и перестроит страницу после изменения среды, но не требует мгновенной одинаковой реакции во всех случаях. Поэтому полезно двигать окно и проверять печать в настоящем браузере. Правильный синтаксис не спасает пиджак, который всё равно жмёт в плечах.

Media Queries разделили работу. Издатель выбирает условия и правила для каждого случая. Браузер измеряет среду и определяет, какие условия выполнены. Читатель сужает окно и сразу видит качество решения. Редакционная статья осталась одной статьёй; CSS наконец перестал являться на каждый случай в одном и том же тесном костюме.