30.01.2026 09:41
📐 Перестаньте верстать под экран: @container Мы привыкли делать адаптив через @media, опираясь на размер экрана. Но это
📐 Перестаньте верстать под экран: @container
Мы привыкли делать адаптив через @media, опираясь на размер экрана. Но это ломает компонентный подход.
Представьте карточку товара. На десктопе в основной сетке она широкая, а в сайдбаре - узкая. Если вы используете @media (min-width: 1200px), то карточка в сайдбаре будет "думать", что места много, и развалится, хотя сам сайдбар узкий.
Раньше мы лечили это пропсами isSmall, variant="sidebar" или сложным CSS. Теперь есть нативное решение Container Queries.
В чем суть? Компонент теперь смотрит не на ширину окна браузера (viewport), а на ширину своего родительского контейнера.
Как использовать:
1. Обозначаем родителя как контейнер чтобы дочерние элементы могли "измерять" родителя, нужно явно включить этот режим.
.card-wrapper {
/* Включаем отслеживание изменения размера по горизонтали */
container-type: inline-size;
/* Опционально: даем имя, чтобы обращаться к конкретному контейнеру */
container-name: card-box;
}
2. Пишем стили для ребенка
Вместо @media используем @container.
.card {
display: flex;
flex-direction: column;
}
/* Если РОДИТЕЛЬ (.card-wrapper) шире 400px */
@container card-box (min-width: 400px) {
.card {
flex-direction: row; /* Перестраиваем в горизонталь */
gap: 20px;
}
}
Вы создаете по-настоящему изолированный компонент.
Вы можете кинуть этот компонент в футер, в модалку, в грид на 3 колонки или на весь экран, он сам подстроится под выделенное ему место. Вам больше не нужно знать контекст, где компонент будет использоваться.
👉 @frontend_1
Мы привыкли делать адаптив через @media, опираясь на размер экрана. Но это ломает компонентный подход.
Представьте карточку товара. На десктопе в основной сетке она широкая, а в сайдбаре - узкая. Если вы используете @media (min-width: 1200px), то карточка в сайдбаре будет "думать", что места много, и развалится, хотя сам сайдбар узкий.
Раньше мы лечили это пропсами isSmall, variant="sidebar" или сложным CSS. Теперь есть нативное решение Container Queries.
В чем суть? Компонент теперь смотрит не на ширину окна браузера (viewport), а на ширину своего родительского контейнера.
Как использовать:
1. Обозначаем родителя как контейнер чтобы дочерние элементы могли "измерять" родителя, нужно явно включить этот режим.
.card-wrapper {
/* Включаем отслеживание изменения размера по горизонтали */
container-type: inline-size;
/* Опционально: даем имя, чтобы обращаться к конкретному контейнеру */
container-name: card-box;
}
2. Пишем стили для ребенка
Вместо @media используем @container.
.card {
display: flex;
flex-direction: column;
}
/* Если РОДИТЕЛЬ (.card-wrapper) шире 400px */
@container card-box (min-width: 400px) {
.card {
flex-direction: row; /* Перестраиваем в горизонталь */
gap: 20px;
}
}
Вы создаете по-настоящему изолированный компонент.
Вы можете кинуть этот компонент в футер, в модалку, в грид на 3 колонки или на весь экран, он сам подстроится под выделенное ему место. Вам больше не нужно знать контекст, где компонент будет использоваться.
👉 @frontend_1