Hack Frontend Community

CSS Container Queries

Container Queries (контейнерные запросы) — это новая возможность CSS, которая позволяет применять стили на основе размера контейнера, а не размера окна браузера. Это революционное изменение для создания по-настоящему модульных и переиспользуемых компонентов.

Что такое Container Queries?

Container Queries позволяют компонентам адаптироваться к размеру их родительского контейнера, а не к размеру viewport. Это особенно полезно для создания компонентов, которые могут использоваться в разных контекстах.

Отличие от Media Queries

Media Queries реагируют на размер окна браузера:

@media (min-width: 768px) {
  .card {
    width: 50%;
  }
}

Container Queries реагируют на размер контейнера:

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

@container (min-width: 400px) {
  .card {
    width: 50%;
  }
}

Как использовать Container Queries

Объявление контейнера

Сначала нужно объявить элемент как контейнер:

.card-container {
  container-type: inline-size;
  /* или */
  container-type: size;
  /* или */
  container-type: normal; /* по умолчанию, не создает контейнер */
}

Типы контейнеров:

  • inline-size — отслеживает только ширину (inline dimension)
  • size — отслеживает и ширину, и высоту
  • normal — не создает контейнер

Использование @container

После объявления контейнера можно использовать запросы:

.card {
  padding: 1rem;
  font-size: 1rem;
}

@container (min-width: 400px) {
  .card {
    padding: 2rem;
    font-size: 1.25rem;
  }
}

@container (min-width: 600px) {
  .card {
    padding: 3rem;
    font-size: 1.5rem;
  }
}

Практический пример

<div class="sidebar">
  <div class="card-container">
    <div class="card">
      <h3>Заголовок карточки</h3>
      <p>Текст карточки адаптируется к размеру контейнера.</p>
    </div>
  </div>
</div>

<div class="main-content">
  <div class="card-container">
    <div class="card">
      <h3>Заголовок карточки</h3>
      <p>Та же карточка, но в другом контексте.</p>
    </div>
  </div>
</div>

.sidebar {
  width: 300px;
}

.main-content {
  width: 800px;
}

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

.card {
  background: #f0f0f0;
  padding: 1rem;
  border-radius: 8px;
}

/* Карточка адаптируется к размеру контейнера */
@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 1rem;
  }
  
  .card h3 {
    font-size: 1.5rem;
  }
}

@container (min-width: 600px) {
  .card {
    padding: 2rem;
  }
  
  .card h3 {
    font-size: 2rem;
  }
}

Именованные контейнеры

Можно дать контейнеру имя для более точного контроля:

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

.main-content {
  container-type: inline-size;
  container-name: main;
}

/* Стили применяются только к контейнеру с именем "sidebar" */
@container sidebar (min-width: 300px) {
  .card {
    /* стили для карточки в sidebar */
  }
}

/* Стили применяются только к контейнеру с именем "main" */
@container main (min-width: 600px) {
  .card {
    /* стили для карточки в main */
  }
}

Container Query Units

Container Queries вводят новые единицы измерения:

  • cqw — 1% ширины контейнера
  • cqh — 1% высоты контейнера
  • cqi — 1% inline-size контейнера
  • cqb — 1% block-size контейнера
  • cqmin — меньшее значение из cqi и cqb
  • cqmax — большее значение из cqi и cqb
.card-container {
  container-type: inline-size;
}

.card {
  font-size: clamp(1rem, 4cqw, 2rem);
  padding: clamp(1rem, 5cqw, 3rem);
}

Комбинация с Media Queries

Container Queries и Media Queries можно использовать вместе:

/* Media Query для общего layout */
@media (min-width: 1024px) {
  .page {
    display: grid;
    grid-template-columns: 1fr 3fr;
  }
}

/* Container Query для компонента */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
  }
}

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

Container Queries поддерживаются в современных браузерах:

  • Chrome 105+
  • Firefox 110+
  • Safari 16.0+
  • Edge 105+

Для старых браузеров можно использовать полифилл или fallback через Media Queries.

Преимущества Container Queries

  1. Модульность: Компоненты становятся по-настоящему независимыми
  2. Переиспользуемость: Один компонент работает в разных контекстах
  3. Гибкость: Легче создавать адаптивные дизайны
  4. Лучшая производительность: Браузер может оптимизировать рендеринг

Когда использовать

Используйте Container Queries, когда:

  • Компонент должен адаптироваться к размеру контейнера, а не viewport
  • Создаете переиспользуемые компоненты
  • Нужна более гибкая адаптивность

Используйте Media Queries, когда:

  • Нужно изменить общий layout страницы
  • Адаптация зависит от размера экрана устройства
  • Работаете со старыми браузерами

Совет:

Container Queries — это мощный инструмент для создания модульных компонентов. Используйте их вместе с Media Queries для создания гибких и адаптивных интерфейсов.