С контейнерными запросами наконец можно описывать адаптивность компонента не через ширину всего окна, а через место, которое ему реально выделили. Карточка товара, таблица или боковая панель могут менять раскладку, когда меняется размер родительского контейнера. Для переиспользуемых компонентов это выглядит гораздо логичнее, чем набор брейкпоинтов, рассчитанных на конкретную страницу.
Базовый сценарий довольно простой: у родителя задаём `container-type: inline-size`, а внутри используем `@container (min-width: ...)`. Важно помнить, что запрос срабатывает не на любой ближайший элемент, а на подходящий контейнер, поэтому структуру и имена контейнеров лучше продумать заранее. Если контейнеров несколько, пригодится `container-name`, иначе легко получить неожиданное поведение при изменении вложенности.
На практике технология особенно хорошо показывает себя в дизайн-системах: один компонент можно без специальных модификаторов вставлять в сетку, сайдбар или модальное окно. Но полностью забывать о медиазапросах не стоит: они по-прежнему удобны для глобальных изменений — например, размера шапки, навигации или отступов страницы. А container queries лучше оставить на уровне самого компонента.
Интересно обсудить реальный опыт: где вы уже применяли контейнерные запросы, какие проблемы встретили в браузерах и командах, и не усложнили ли они поддержку CSS? Отдельный вопрос — как вы сочетаете их с Grid, Flexbox и токенами дизайн-системы.
Базовый сценарий довольно простой: у родителя задаём `container-type: inline-size`, а внутри используем `@container (min-width: ...)`. Важно помнить, что запрос срабатывает не на любой ближайший элемент, а на подходящий контейнер, поэтому структуру и имена контейнеров лучше продумать заранее. Если контейнеров несколько, пригодится `container-name`, иначе легко получить неожиданное поведение при изменении вложенности.
На практике технология особенно хорошо показывает себя в дизайн-системах: один компонент можно без специальных модификаторов вставлять в сетку, сайдбар или модальное окно. Но полностью забывать о медиазапросах не стоит: они по-прежнему удобны для глобальных изменений — например, размера шапки, навигации или отступов страницы. А container queries лучше оставить на уровне самого компонента.
Интересно обсудить реальный опыт: где вы уже применяли контейнерные запросы, какие проблемы встретили в браузерах и командах, и не усложнили ли они поддержку CSS? Отдельный вопрос — как вы сочетаете их с Grid, Flexbox и токенами дизайн-системы.
Комментарии 8
Обсуждение темы — по порядку