С момента появления адаптивного веб-дизайна (Responsive Web Design), медиа-запросы (@media) были единственным способом менять стили элементов в зависимости от размера экрана устройства. Однако в масштабных компонентно-ориентированных архитектурах (React, Vue, Web Components) 2026 года привязка к viewport стала серьезным ограничением. На сцену вышли контейнерные запросы (CSS @container).
Что такое CSS @container?
Запросы к контейнеру (Container Queries) позволяют элементам адаптировать свой внешний вид в зависимости от размера своего родительского элемента, а не всего окна браузера. Это революционный шаг, который делает компоненты по-настоящему независимыми и переиспользуемыми. Вы можете вставить карточку товара в широкую основную колонку или в узкий боковой сайдбар, и карточка сама изменит свою верстку, исходя из доступного для нее места, без написания дополнительных классов.
Как использовать контейнерные запросы в 2026 году
Для активации контейнерных запросов необходимо сначала объявить элемент-родитель «контейнером» с помощью свойства container-type.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* 1. Определяем контейнер (родитель) */ .product-grid { /* Говорим браузеру отслеживать изменение ширины (inline-size) этого элемента */ container-type: inline-size; container-name: product-wrapper; /* Опциональное имя контейнера */ } /* 2. Определяем стили компонента по-умолчанию (для узкого контейнера) */ .product-card { display: flex; flex-direction: column; gap: 1rem; } /* 3. Меняем верстку, если ширина РОДИТЕЛЯ больше 600px */ @container product-wrapper (min-width: 600px) { .product-card { flex-direction: row; /* карточка становится горизонтальной */ align-items: center; } } |
В отличие от устаревших @media (min-width: 600px), правило @container сработает только тогда, когда сам блок .product-grid станет шире 600 пикселей, независимо от того, открыт ли сайт на смартфоне или на 4K-мониторе.
Контейнерные единицы измерения (Container Query Units): Аналогично
vwиvh, CSS предоставляетcqi(container query inline),cqw(container query width) и другие единицы, которые измеряют процент от размера контейнера. Например:font-size: max(1.5rem, 5cqi);позволяет шрифту масштабироваться в зависимости от ширины его блока.
Часто задаваемые вопросы (FAQ) об @container
Можно ли полностью отказаться от @media запросов в пользу @container?
Не совсем. @media запросы по-прежнему нужны для глобальной разметки страницы (макро-лейаут), например, чтобы свернуть боковое меню на смартфонах. А @container используется для микро-лейаута: стилизации отдельных карточек, кнопок, списков и форм внутри этой сетки.
Какие виды container-type существуют?
В основном используются три значения: normal (не является размерным контейнером, применяется только для container-style), size (отслеживаются и ширина, и высота), и inline-size (отслеживается ширина по оси текста, самый частый вариант, так как высота обычно определяется контентом).
Что такое контейнерные запросы по стилю (Style Queries)?
Это следующий шаг в эволюции CSS! Помимо размеров, с помощью @container можно отслеживать значения CSS-переменных (custom properties) у родителя. Например, @container style(—theme: dark) позволяет компоненту изменить стили, если его родитель имеет определенную переменную.
