Контейнерные запросы: размеры компонентов по контейнеру, а не по области просмотра

Что это такое

Медиазапрос спрашивает, какова ширина области просмотра; контейнерный запрос — какова ширина конкретного предка. Элемент становится контейнером запросов через container-type: inline-size (запросы по строчной оси) или size (по обеим осям), при необходимости с именем через container-name. Правила внутри @container (width > 40em) { .card { … } } применяются к потомкам в зависимости от ближайшего предка с контекстом containment либо именованного предка, если имя указано. MDN перечисляет единицы относительно контейнера (cqw, cqh, cqi, cqb, cqmin, cqmax), каждая из которых равна 1% соответствующего размера контейнера и может использоваться везде, где допустима длина, например в font-size.

Почему это важно

Компонент, размещённый в боковой панели, основной колонке и модальном окне, не может определить доступное пространство по ширине области просмотра. С точками перелома области просмотра каждое размещение требует своих переопределений; с контейнерными запросами компонент несёт собственные точки перелома и адаптируется везде, куда его поместили. Благодаря этому компоненты дизайн-системы можно повторно использовать в разных макетах, а не только на разных страницах.

Как применять

• Делайте контейнером обёртку, а не сам компонент. Элемент не может реагировать на собственный размер: содержимое меняло бы размер и переключало результат запроса, что MDN описывает как бесконечный цикл и причину применения изоляции размеров.
• Предпочитайте inline-size. Значение size изолирует и блочную ось, поэтому элемент перестаёт расти вместе с содержимым, если ему не задана явная высота.
• Давайте контейнерам имена при вложении компонентов (container-name: card) и обращайтесь по имени, чтобы внутренний запрос не совпал с непредусмотренным предком.
• Используйте cqi для плавного изменения типографики и отступов внутри компонента, оборачивая значения в clamp(), чтобы крайние размеры оставались читаемыми.
• Сохраняйте медиазапросы области просмотра для макета страницы (число колонок, навигация), а контейнерные запросы — для компонентов; оба подхода сосуществуют.
• Точки перелома внутри @container должны быть литеральными значениями, поскольку пользовательские свойства не разрешены в условиях запросов; храните их в одном месте для каждого компонента.

Подводные камни

Containment меняет раскладку: ширина контейнера inline-size должна задаваться контекстом (блочный элемент растягивается до ширины родителя) или явно, иначе он схлопывается и запрос никогда не выполняет условие. Запросы стилей контейнера (@container style(--x: y)) — отдельная возможность; проверяйте их поддержку отдельно от запросов размеров. Контейнер запросов, размер которого сам определяется дочерними элементами (flex-элемент с flex: 0 0 auto, абсолютно позиционированный блок без ширины), — обычная причина того, что «запрос никогда не срабатывает».