Долгое время мы использовали Media Queries, которые ориентируются на размер экрана.
Но в современной компонентной разработке важно, чтобы элемент знал размер своего родителя, а не всего окна браузера.
1. Установка контекста контейнера
Чтобы элемент мог реагировать на размер родителя, мы задаем родителю свойство container-type.
Код
<style>.card-wrapper {
container-type: inline-size;
container-name: post;
width: 100%;
}</style>
container-type: inline-size;
container-name: post;
width: 100%;
}</style>
2. Адаптивность на уровне компонента
Теперь мы можем менять стили карточки в зависимости от того, в какой колонке она находится: в узкой боковой панели или в широкой центральной части.
Код
<style>/* Базовый стиль для узкого контейнера */
.card {
display: flex;
flex-direction: column;
background: oklch(0.9 0.02 250); /* Современное пространство цветов */
padding: 1rem;
}
/* Стиль для широкого контейнера (больше 500px) */
@container post (min-width: 500px) {
.card {
flex-direction: row;
gap: 2rem;
background: oklch(0.95 0.05 150); /* Меняем оттенок */
}
.card__image {
width: 40%;
}
}</style>
.card {
display: flex;
flex-direction: column;
background: oklch(0.9 0.02 250); /* Современное пространство цветов */
padding: 1rem;
}
/* Стиль для широкого контейнера (больше 500px) */
@container post (min-width: 500px) {
.card {
flex-direction: row;
gap: 2rem;
background: oklch(0.95 0.05 150); /* Меняем оттенок */
}
.card__image {
width: 40%;
}
}</style>
3. Магия oklch(): Динамические цвета
В 2026 году стандарт oklch() стал основным для работы с цветом. Он позволяет менять яркость (L), хроматичность © и тон (H) программно и предсказуемо для человеческого глаза.
Код
<style>.card:hover {
/* Просто увеличиваем яркость на 10%, не меняя сам цвет */
background: oklch(from var(--bg-color) calc(l + 0.1) c h);
}</style>
/* Просто увеличиваем яркость на 10%, не меняя сам цвет */
background: oklch(from var(--bg-color) calc(l + 0.1) c h);
}</style>
Почему это важно?
Модульность: Вы можете вставить один и тот же компонент в любое место сайта, и он сам "подстроится" под окружение.
Доступность: Цвета в oklch легче настраивать для соблюдения контрастности.
Меньше кода: Больше не нужно писать десятки @media запросов для разных разрешений.
