container-type и container-name

Запросы контейнера позволяют CSS применять стили на основе размера родительского контейнера, а не области просмотра. Благодаря этому создаётся действительно компонентный адаптивный дизайн, в котором компонент подстраивается под место размещения.

При использовании медиазапросов компонент карточки в боковой панели шириной 300 пикселей не может узнать, что он мал, — он знает только, что область просмотра широкая. Запросы контейнера позволяют компоненту реагировать на размер собственного контейнера, а не глобальной области просмотра.

Чтобы выполнять запросы к контейнеру, сначала объявите его контейнером запросов с помощью container-type:

Доступные значения:

• inline-size — включает запросы по внутреннему размеру контейнера (ширине при горизонтальном направлении письма)
• size — включает запросы по внутреннему и блочному размерам (ширине и высоте)
• normal — значение по умолчанию; запросы по размеру недоступны, но запросы по стилю всё ещё возможны

Задайте контейнеру имя, чтобы ссылаться на него в запросах. Это необходимо при наличии вложенных контейнеров, если нужно обращаться к определённому предку:

Сокращённая запись container задаёт и имя, и тип:

К безымянному контейнеру всё равно можно обращаться в запросах — правило @container по умолчанию выбирает ближайшего предка-контейнера. Имена нужны только в том случае, если требуется обратиться к определённому предку, пропустив ближайшие.

Каждый элемент с container-type получает собственную изоляцию компоновки. Это означает, что изменения размера внутри контейнера не влияют на предков, что повышает производительность. Браузеру не нужно пересчитывать всю страницу при изменении контейнера.

Настройка container-type: inline-size неявно задаёт для элемента contain: inline-size layout style. Это не позволяет размеру контейнера влиять на его собственную компоновку и необходимо для работы запросов по размеру.

Полная настройка запроса контейнера:

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

container-type: inline-size определяет элемент как контейнер запросов для его ширины. Используйте container-name, чтобы именовать контейнеры для выборочного обращения к ним. Сокращённая запись container задаёт оба значения. Запросы контейнера решают проблему компонента в неизвестном контексте, с которой медиазапросы области просмотра не справляются.