Все мы привыкли к медиа-запросам (@media). Они отлично работают, когда нужно перестроить всю страницу целиком под мобильный экран.
Но что делать, если один и тот же компонент (например, карточка товара) должен выглядеть по-разному в узкой боковой панели и в широкой центральной сетке?
Раньше приходилось плодить JS-логику или писать тонны костыльных CSS-классов вроде .card--sidebar, .card--grid.
Теперь всё изменилось. С помощью Container Queries компонент сам адаптируется под размеры своего родительского контейнера, а не всего экрана!
Как это работает?
Сначала мы объявляем для родительского элемента контекст контейнера с помощью свойства container-type:
.sidebar, .main-grid {
/* Говорим браузеру следить за изменением ширины (inline-size) этого блока */
container-type: inline-size;
/* (Опционально) даем контейнеру имя, чтобы обращаться именно к нему */
container-name: card-wrapper;
}
А теперь стилизуем саму карточку внутри этого контейнера:
/* По умолчанию карточка вертикальная (для узких блоков) */
.card {
display: flex;
flex-direction: column;
}
/* Если родительский контейнер становится шире 400px, делаем её горизонтальной */
@container card-wrapper (min-width: 400px) {
.card {
flex-direction: row;
gap: 20px;
}
}
В чём профит?
Вы создаете абсолютно независимый компонент. Вы можете закинуть его в шапку, подвал, сайдбар или динамический попап – он сам поймет, сколько у него места, и перестроится.
Поддержка в браузерах: уже более 90% (все современные хромиумы, Safari 16+ и Firefox 110+).
#полезности #css