CSS. Container Queries

Container Queries – это CSS-механизм, который позволяет применять стили на основе размера родительского контейнера, а не всего окна браузера.

Обычные медиазапросы:

@media (max-width: 768px)

ориентируются на:

размер viewport (экрана)

Container Queries ориентируются на:

размер конкретного элемента

Обычный подход:

@media (max-width: 768px) {
  .button {
    ...
  }
}

Проблема:

Например:

Большой экран
      ↓
маленькая карточка
      ↓
кнопке всё равно мало места

Компонент не должен знать размер всего приложения.
Ему важно понимать: сколько места есть у него самого

Использовать:

container queries

Они позволяют адаптировать компонент относительно его родителя.

Сначала объявляем контейнер:

.responsive-button {
  container-type: inline-size;
}

Теперь элемент можно использовать как основу для запросов.

Создаём запрос:

@container (max-width: 200px) {
  .text {
    display: none;
  }
}

Если ширина контейнера меньше 200px:

ADD TO CART
        ↓
скрывается

HTML:

<button class="responsive-button">
  <img src="cart.png" alt="...">
  <span class="text">ADD TO CART</span>
</button>

CSS:

.responsive-button {
  container-type: inline-size;
}
 
@container (max-width: 200px) {
  .text {
    display: none;
  }
}

@media (max-width: 768px)

Проверяет:

размер окна браузера

@container (max-width: 200px)

Проверяет:

размер родительского контейнера

LETUNOFF DOCS