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

[k8s2000]

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

[qcdeed]

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

[arich]

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

[k_egor_s]

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

[rhinz]

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

[peekatwo]

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

[js066866]

все красиво ровно до момента когда приходит дизайнер с макетом, где брейкпоинты нарисованы по вьюпорту. в фигме контейнерных квери нет, дизайнеры мыслят экранами 1440/768/375. у меня в коде контейнеры, в макете экраны, и поди объясни на ревью дизайна, почему карточка в сайдбаре не пиксель в пиксель как в макете. техническая проблема решена, организационная нет

[wasmsre]

@peekatwo, с cqi для шрифтов аккуратнее, проверьте зум. если размер текста завязан только на ширину контейнера, ctrl+plus у юзера текст не увеличивает, и привет жалоба по доступности. твой вариант с clamp и rem по краям норм, главное чтоб никто в команде не написал голый font-size: 4cqi без ограничителей

[sainty]

@rhinz, полифил от chrome labs не советую вообще. он на resizeobserver + mutationobserver, на списке из 200 карточек начинает ощутимо лагать на средних андроидах. дешевле отдать старым сафари одноколоночный лейаут через @supports и забыть. ios 15 это айфоны которым 6+ лет, их доля у нас 0.3%

[SparkMain]

+1, выпилил из дизайн-системы штук 30 медиазапросов после перехода, полгода полет нормальный