Container queries: как CSS связывает компонент с его настоящим окружением
Размер контейнера, логические оси, именованные контексты и единицы cqi: устройство адаптивного компонента без привязки к ширине всего окна.
Почему ширина окна не описывает карточку
Одинаковая карточка может находиться в основной колонке, боковой панели или внутри модального окна. При одной ширине браузера эти области имеют разные размеры. Media query видит окно и не различает такие случаи. Container query переносит условие на предка компонента.
Это не новый способ построения сетки: геометрию по-прежнему задают Grid, Flexbox и обычный поток. Условие лишь включает CSS-декларации при подходящих характеристиках контейнера. Например, одна карточка остаётся вертикальной в панели и становится горизонтальной в основной колонке. При этом одинаковый HTML не обязан заранее знать название области страницы, в которую его поместили.
Зачем объявлять container-type
Для запросов размеров предок явно объявляется контейнером. Значение inline-size позволяет запрашивать его размер по строчной оси; size охватывает обе размерности. Значение normal не создаёт размерный контекст, хотя элемент остаётся пригодным для других разновидностей запросов. Это различие важно: само наличие обёртки в DOM ещё не делает её источником измерения.
Объявление связано с containment — ограничением зависимостей при расчёте оформления. Если размер родителя определялся бы содержимым, а оформление содержимого постоянно переключалось в зависимости от этого размера, возникала бы циклическая зависимость. Размерная изоляция разрывает такую связь. Поэтому container-type не является безусловно нейтральной пометкой: особенно при size высота больше не может рассчитываться так, словно размеры всех потомков свободно определяют внешнюю коробку. Для типичной карточки с естественной высотой обычно обсуждается inline-size, а двухосный контекст предполагает отдельно определённую геометрию. Название значения описывает измеряемую ось, а не желаемый способ раскладки содержимого.
Как выбирается предок
Условие @container применяется к элементу через его предков. Сам элемент не становится собственным размерным контейнером для изменения себя этим же запросом. Без имени выбирается ближайший подходящий контекст. Новая размерная обёртка способна изменить источник измерения, даже если селектор карточки остался прежним.
container-name фильтрует подходящих предков. Имя чувствительно к регистру; один элемент может иметь несколько имён. Сокращение container объединяет имя и тип через косую черту. Именование не создаёт глобальную переменную: браузер ищет контейнер в цепочке предков конкретного элемента. Одинаковое имя допустимо у независимых экземпляров. Каждый оценивается в собственной ветви документа, не получая доступа к чужому размеру только из-за совпадения слова в условии.
Логические оси и вертикальное письмо
width и height описывают физические горизонталь и вертикаль. inline-size и block-size следуют направлению письма. При обычном горизонтальном тексте строчная ось проходит слева направо или справа налево, а блоки располагаются сверху вниз. В вертикальном режиме строчная ось поворачивается, и привычное равенство inline-size с шириной перестаёт действовать.
Иллюстрации MDN показывают это на одной сетке: при замене writing-mode физическая width остаётся горизонтальной мерой, тогда как inline-size следует потоку текста. Для контейнерных условий различие столь же существенно. Контекст inline-size даёт измерение по логической строчной оси, а не универсальное разрешение на произвольный запрос высоты. Такой словарь нужен не только многоязычному сайту: вертикальные подписи и экспериментальная типографика могут появляться внутри отдельного компонента. Направление письма определяется его оформлением, а не языком всей страницы, поэтому две соседние области способны иметь разные соответствия физических и логических размеров.
Единицы, привязанные к контейнеру
Семейство cq позволяет выражать длину как долю размера подходящего контейнера. cqw и cqh относятся к физической ширине и высоте, cqi и cqb — к строчной и блочной осям. Одна такая единица равна одному проценту соответствующего размера. cqmin выбирает меньшую логическую размерность, cqmax — большую. Это другой источник отсчёта, чем vw и vh, которые описывают окно.
Такие единицы могут участвовать в вычислениях вместе с обычными относительными длинами. Например, размер текста может иметь постоянную составляющую и добавку, зависящую от контейнера; ограничивающая функция задаёт допустимый диапазон. При этом отсутствие подходящего контейнера не обнуляет длину: спецификация использует малую размерность viewport для соответствующей оси. Поэтому cqi без подходящего предка не означает «процент ближайшего div». Разница особенно заметна при переносе фрагмента разметки из подготовленного компонента в самостоятельную страницу, где исходной обёртки больше нет.
| Единица | Один процент |
|---|---|
| cqw / cqh | Физическая ширина / высота контейнера |
| cqi / cqb | Строчный / блочный размер |
| cqmin / cqmax | Меньший / больший из логических размеров |
Источник: MDN: container query length units
Размерные условия и style()
Запросы размеров и запросы стилей используют общую оболочку @container, но проверяют разные сведения. Первые сравнивают width, height, inline-size, block-size, aspect-ratio или orientation. Style query рассматривает вычисленное значение свойства контейнера. В практической документации MDN поддерживаемым случаем названы custom properties; возможность произвольно запрашивать любую CSS-декларацию нельзя автоматически считать доступной только из-за её присутствия в синтаксисе развивающейся спецификации.
Пользовательское свойство может описывать вариант компонента, например его цветовую тему. Потомки получают оформление при совпадении значения, без дополнительного класса на каждом вложенном узле. Это не чтение всей таблицы стилей и не замена наследованию: условие сравнивает конкретную характеристику выбранного предка. Размерный контекст для такой проверки не обязательно объявлять так же, как для width. Совпадение слов «container query» поэтому не делает набор требований одинаковым для всех разновидностей механизма.
Составные условия и вложенность
Спецификация различает несколько условий внутри одного запроса и список независимых запросов. Связка and объединяет проверки для выбранного контейнера. Запятая создаёт альтернативы; каждая часть списка может выбрать свой подходящий контекст. Вложенные @container также способны оцениваться относительно разных предков. Поэтому механическое объединение двух вложенных правил в одно условие не всегда сохраняет поведение.
Если подходящего предка нет либо требуемая характеристика неизвестна реализации, условие не даёт ожидаемого совпадения. Основные стили элемента при этом остаются обычными правилами каскада: браузер не создаёт автоматически другую раскладку. Условия не ограничивают глобальные объявления вроде @font-face или именования @keyframes так, будто это локальные ресурсы конкретной карточки. Контейнерная область управляет применением правил оформления, но не вводит отдельный документ или собственное пространство имён для всего, что записано между её фигурными скобками.
