Как работают @container queries?

Контейнерные запросы (@container) — это новый инструмент адаптивного дизайна в CSS, который позволяет менять стили элементов в зависимости от размеров их родительского контейнера, а не всего экрана, как это происходит с медиа-запросами (@media). Это дает большую гибкость при создании адаптивных компонентов.

Зачем нужны @container queries?

Ранее адаптивность достигалась через @media, но у этого подхода есть недостатки:

• Если компонент используется в разных местах с разной шириной, он может выглядеть не так, как ожидалось.
• Дизайн зависел от ширины всего экрана, а не от реального размера контейнера.

@container решает эти проблемы, позволяя компонентам адаптироваться к их родительским контейнерам.

Синтаксис и использование

Чтобы использовать контейнерные запросы, сначала нужно объявить контейнер, который будет отслеживать изменения размеров:

css
.card {
  container-type: inline-size; /* Контейнер адаптируется по ширине */
  container-name: card-container; /* Название контейнера */
}

Теперь внутри него можно применять @container queries:

css
@container card-container (max-width: 400px) {
  .card {
    background-color: lightgray;
    font-size: 14px;
  }
}

Здесь .card поменяет стиль, если его контейнер стал меньше 400px.

Возможности контейнерных запросов

1. Адаптивные компоненты – один и тот же компонент может выглядеть по-разному в зависимости от места использования.
2. Гибкость без зависимости от ширины экрана – компонент сам определяет, когда изменять стили.
3. Поддержка вложенных контейнеров – можно задавать стили для разных уровней вложенности.

Поддержка браузерами

На 2024 год контейнерные запросы поддерживаются во всех современных браузерах, включая Chrome, Edge, Firefox и Safari.

Использование @container делает разработку адаптивных компонентов удобнее и мощнее. Уже сейчас стоит внедрять этот подход в новые проекты!