Кратко

  • Первый публичный проект CSS Containment Level 3 от 21 декабря 2021 года отделил запросы к среде отображения от запросов к элементам внутри документа. Свойство container-type задаёт контейнер, а правило @container включает стили его потомков по условию.
  • Проект от 18 августа 2022 года уточнил размерные запросы, имена контейнеров и относительные единицы. Его пример показывает один компонент в широкой основной области и узкой боковой колонке.

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

Первый публичный проект W3C от 21 декабря 2021 года сформулировал это различие. Медиа-запросы проверяют условия показа, например размер области просмотра. Контейнерные запросы обращаются к элементам документа, включая размеры их блоков. Один и тот же компонент может стоять в нескольких местах на одном экране. Окно у них общее, а доступное пространство в каждой колонке своё.

Автор отмечает подходящего предка свойством container-type. Затем условие @container определяет, какие стили применить к его потомкам. В широкой области фотография располагается рядом с описанием; в узкой элементы встают один под другим. Для обеих карточек браузер держит одну ширину окна, но выбирает оформление по местному размеру. Редакция решает, где использовать компонент. CSS узнаёт, сколько места ему отвели в этом месте.

У такой свободы есть инженерная граница. Если ширина блока зависела бы от расположения детей, а дети выбирали бы расположение после запроса ширины того же блока, измерение пошло бы по кругу. В демонстрации W3C 2021 года объяснялось, зачем обозначать контейнеры и при необходимости ограничивать зависимость их размеров от содержимого. Стабильная граница позволяет использовать размер предка как входные данные для стилей потомков.

В рабочем проекте от 18 августа 2022 года появился пример с основной областью и боковой колонкой. Один медиа-компонент переключается между вертикальным и горизонтальным расположением в зависимости от своего контейнера. container-type: inline-size делает предка доступным для запроса вдоль строчной оси. Имя контейнера помогает @container обратиться к нужному предку. Правило действует на потомков выбранного блока, а не на все карточки по единому размеру окна.

Единицы cqw и cqi позволяют выражать длины через ширину контейнера или его размер вдоль строки. Детали оформления способны расти и уменьшаться вместе с местом, в которое переехала карточка. Сообщение рабочей группы CSS W3C перечисляло строчное ограничение размера, единицы и условное правило как части обновлённой конструкции.

Формулировки успели измениться между выпусками. В 2021 году проект пробовал типы block-size и state; версия 2022 года убрала одноосный block-size и уточнила начальные значения и сокращённую запись. История публикаций W3C отмечает оба этапа. Перед авторами CSS стояла практическая задача: превратить понятную мысль о размере местного блока в правило, которое можно последовательно вычислять.

Боковая колонка не стала шире. Карточка просто получила право узнать её ширину прежде, чем расставлять картинку и слова. Иногда хороший дизайн начинается с правильного вопроса к комнате.