Container Queries в браузерах 2026: адаптивность без JavaScript

[hannadev]

Container Queries меняют подход к адаптивной верстке. Теперь компоненты подстраиваются под размер своего контейнера, а не только под экран. Это избавляет от лишнего JavaScript и делает код проще.

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

Что такое Container Queries и зачем они нужны

Container Queries позволяют стилизовать элементы на основе размеров их родительского контейнера. Раньше медиа-запросы смотрели только на viewport, что усложняло жизнь при разных макетах. Теперь карточка в сайдбаре и в контенте адаптируется независимо.

Представьте карточку товара: в широком блоке она показывает фото слева и текст справа, в узком - все вертикально. Без JS, чисто CSS. Это ускоряет разработку и рендеринг. Браузеры Chrome, Firefox, Safari поддерживают это с 2023-2025 годов, в 2026 - полный охват.

Ключевые преимущества:

• Компоненты становятся автономными: не зависят от общего макета.
• Меньше JS: нет нужды в скриптах для перестроения DOM.
• Производительность растет, так как CSS работает быстрее.

Сравнение подходов	Медиа-запросы	Container Queries
Основа запроса	Viewport	Контейнер
Адаптивность	Глобальная	Локальная
JS зависимость	Часто да	Нет
Поддержка 2026	Полная	Полная

Как настроить контейнер и запустить запрос

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

Далее пишите @container (min-width: 500px) { … }. Браузер проверяет размер контейнера и применяет стили. Пример: карточка меняет grid на flex при узком родителе. В 2026 это работает везде, включая новые scroll-state запросы в Chrome/Edge/Opera.

Шаги настройки:

1. .container { container-type: inline-size; }
2. @container (max-width: 768px) { .item { font-size: 14px; display: block; } }

• Тестируйте в DevTools: меняйте размер контейнера.

container-type	Описание	Применение
inline-size	Только ширина	Карточки, блоки
size	Ширина + высота	Сложные layouts
scroll-state	Скролл-состояние	Sticky элементы

Новые возможности в 2026: scroll-state и style queries

К 2026 scroll-state queries поддерживаются в большинстве браузеров. Они реагируют на состояния вроде stuck, snapped или scrollable. Полезно для sticky-хедеров в контейнерах.

Style queries ждут полной поддержки в Firefox, но уже экспериментируют. Проверяют CSS-переменные контейнера. Пример: если --theme: dark, меняем цвета внутри. Используйте @supports для прогрессивного улучшения.

Примеры использования:

• Scroll-state: @container scroll-state(stuck) { header { background: rgba(0,0,0,0.9); } }
• Style query: @container style(–mode: compact) { .item { grid-template-columns: 1fr; } }
• Комбинируйте с @layer для порядка стилей.

Это открывает путь к сложным анимациям без JS. Браузеры оптимизировали рендеринг под эти фичи.

Поддержка браузеров и практические советы

В 2026 Container Queries имеют 100% поддержку: Chrome 106+, Firefox 110+, Safari 16+, Edge/Opera. Даже iOS Safari и Android в деле. Забудьте о полифиллах.

Для старых браузеров используйте @supports (container-type: inline-size). Добавляйте fallback стили. Тестируйте на реальных устройствах - поведение предсказуемое.

Советы по внедрению:

• Начинайте с простых контейнеров.
• Избегайте переусложнения: не больше 2-3 запросов на компонент.
• Интегрируйте с CSS Grid/Flexbox для мощных layouts.

Браузер	Size Queries	Scroll-state	Style Queries
Chrome
Firefox		Частично	Скоро
Safari			Эксперимент

Взгляд в будущее CSS-контейнеров

Container Queries - шаг к CSS как полноценному языку. Они дополняют :has(), nesting и layers, делая JS опциональным. Осталось дождаться style queries повсеместно.

Дальше ждем интеграцию с Web Components. Подумайте, как это изменит ваши проекты: меньше бандла, быстрее загрузка. CSS эволюционирует быстро.