Адаптивность через @media — привычная вещь, но неудобная: когда один компонент используется в разных местах, его поведение зависит от размера окна браузера, а не от его контейнера. В итоге — хаки и дублирование стилей.
ℹ️ Как было раньше (через media queries):
.card .title {
font-size: 1rem;
}
@media (min-width: 768px) {
.card .title {
font-size: 2rem;
}
}ℹ️ Как стало с Container Queries:
.card {
container-type: inline-size;
container-name: card;
}
.title {
font-size: 1rem;
}
@container card (min-width: 400px) {
.title {
font-size: 2rem;
}
}Проблема: Если компонент .card вставить в узкий сайдбар на широком экране, стили могут «сломаться», так как адаптивность зависит от окна браузера, а не от контейнера. Теперь .title реагирует на размер контейнера, а не на размер вьюпорта. Это решение убирает все костыли и делает компоненты более гибкими.
Теперь можно создавать по-настоящему адаптивные компоненты без костылей. Поддержка в Chrome, Edge и Safari уже есть, так что пора пробовать в продакшене!
🚪 Frontender's notes