Container Queries: новая возможность разделения контейнеров по условиям

Что такое Container Queries? 🤯

Раньше мы адаптировали вёрстку под экран целиком через @media, но что если нужно изменить стили внутри отдельного блока? Например, карточка товара в узкой колонке и в широкой сетке — должна выглядеть по-разному, даже если экран один и тот же!

Container Queries — это ответ. Они позволяют проверять размеры родительского контейнера и применять стили к его содержимому на основе этих размеров. Это как @media, но для отдельных компонентов!

.card {
  container-type: inline-size; /* Включаем отслеживание ширины */
}

@container (min-width: 400px) {
  .card__title {
    font-size: 1.5rem;
  }
}

Зачем это нужно? 🔥

Компонентный подход — стили зависят от контейнера, а не от экрана.
Переиспользование — один компонент работает в любых макетах.
Гибкость — не нужно плодить модификаторы вроде card--wide, card--narrow.

💡 Совет: Container Queries особенно полезны для дизайн-систем и библиотек компонентов, где один элемент встраивается в разные контексты.

Как это работает? 🛠️

1. Объявляем контейнер

Сначала нужно сказать браузеру: «Эй, следи за этим блоком!»

.component {
  container-type: inline-size; /* Отслеживаем ширину */
  container-name: sidebar;     /* Опционально: имя для точного таргетинга */
}

Варианты container-type:

inline-size — только ширина (чаще всего этого достаточно).
size — ширина + высота (редкие случаи сложной логики).

2. Пишем условия

Теперь используем @container для проверки размеров:

@container (min-width: 600px) {
  .component__image {
    float: left;
    width: 40%;
  }
}

Или с именем, если контейнеров несколько:

@container sidebar (max-width: 300px) {
  /* Стили только для контейнера с именем "sidebar" */
}

Практический пример: адаптивная карточка 🃏

Допустим, у нас есть карточка, которая должна:

В узких контейнерах показывать заголовок и текст в столбик.
В широких — делать изображение слева, а текст справа.

HTML:

<div class="card-container">
  <article class="card">
    <img src="photo.jpg" class="card__image">
    <h3 class="card__title">Заголовок</h3>
    <p class="card__text">Описание...</p>
  </article>
</div>

CSS:

.card-container {
  container-type: inline-size;
}

.card {
  padding: 1rem;
  background: #fff;
}

/* Стили для узких контейнеров (по умолчанию) */
.card__image {
  width: 100%;
}

/* Стили для контейнеров шире 500px */
@container (min-width: 500px) {
  .card {
    display: flex;
    gap: 1rem;
  }
  .card__image {
    width: 150px;
  }
}

Поддержка браузеров и fallback 🌍

На момент 2024 года Container Queries поддерживаются всеми современными браузерами. Но если нужно обеспечить совместимость:

.card {
  /* Стандартные стили для старых браузеров */
}

@supports (container-type: inline-size) {
  /* Стили с Container Queries */
}

Когда использовать? Выбираем между @media и @container 📱🔄🖥️

Кейс	`@media`	`@container`
Адаптация всего макета	✅	❌
Компоненты в сайдбаре	⚠️	✅
Карточки в сетке	❌	✅
Тема (dark/light)	✅	❌

Потрясающие возможности ✨

1. Динамические отступы: Менять padding или gap в зависимости от доступного пространства.

@container (min-width: 300px) and (max-width: 600px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

2. Типографика: Увеличить размер шрифта только если контейнер достаточно широк.

3. Скрытие/показ элементов: Например, убирать второстепенные детали в узких блоках.

Итог: меняем парадигму вёрстки 🎯

Container Queries — это масштабный сдвиг в подходе к адаптивному дизайну. Теперь компоненты действительно независимы от страницы, на которую их помещают.

С чего начать?

Выберите один компонент на вашем проекте (карточку, список, баннер).
Замените @media на @container для его внутренних стилей.
Проверьте, как он ведёт себя в разных контейнерах!

Если хотите глубже разобрать примеры, посмотрите разборы Данилы Бежина на YouTube — он отлично объясняет сложные концепции через практику.