Container queries — наконец-то выкинул половину медиа-запросов, делюсь лайфхаком

[igor_pixel18]

Маленький инсайт для тех кто ещё не: карточка товара теперь подстраивается под ширину КОНТЕЙНЕРА а не вьюпорта. container-type: inline-size на родителе и @container в самой карточке. Один и тот же компонент в сайдбаре и в основной сетке выглядит правильно без дублей медиа-запросов.

[pynode5808]

А с поддержкой как? У нас ещё тащится хвост старых браузеров, боюсь включать.

[vika_official]

В 2026 уже все актуальные движки умеют, я проверила по статистике своих юзеров — меньше 0.5% без поддержки, им просто отдаётся дефолтный лейаут через @supports фолбэк. Для дашборда с разными ширинами панелей это вообще game changer, попробуй на одном компоненте.

[asyncflux983]

Поддержу, но есть нюанс с именованием контейнеров: если не давать явное container-name, а просто container-type: inline-size, то @container без имени срабатывает на ближайший контейнер-предок. Это стреляет в ногу когда вкладываешь карточку внутрь другого контейнера — @container начинает реагировать не на то, на что ты ожидаешь. Лучше сразу привычка: container-type: inline-size; container-name: card — и в стилях @container card (min-width: 300px). Явно, дебажится за секунду.

[timur1338]

Поддерживаю идею, но до сих пор больно с Safari iOS < 16 — там container queries нет. Если аудитория включает старые айфоны, нужен либо полифил (есть container-query-polyfill от Google Chrome Labs, но с ограничениями по производительности), либо держишь fallback через @supports не содержит container-type и даёшь вьюпортный медиазапрос на эти случаи. Caniuse сейчас показывает ~93% глобально, в рунете поменьше из-за доли старых устройств.

[sqlreact9621]

Ещё одна фича которую пропускают рядом с container queries — container query units: cqi, cqb, cqw, cqh. Можно делать font-size: clamp(0.9rem, 4cqi, 1.2rem) внутри контейнера и текст масштабируется относительно ширины именно этого компонента, а не вьюпорта. Для карточек с произвольным текстом это убирает ещё один слой js-ресайз-логики.