CSS container queries в стабильных браузерах

Пример работы контейнерныз запросов

Поздравляем! Новая веб-фича CSS контейнерных запросов теперь поддерживается всеми браузерами.

105 110 105 16

С помощью контейнерных запросов вы можете запросить информацию о стиле родительского элемента, например его встроенный размер. С помощью медиа-запросов вы можете запрашивать размер области просмотра, контейнерные запросы позволяют компонентам, которые могут изменяться в зависимости от того, где они находятся в пользовательском интерфейсе.

Контейнерные запросы особенно удобны для адаптивного дизайна и повторно используемых компонентов. Например, включение компонента карты, который может располагаться одним способом при размещении на боковой панели и в другой конфигурации в сетке товаров.

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

Чтобы использовать контейнерные запросы, сначала задайте container-type для родительского элемента. Сделайте это, задав container-type для родительского контейнера или используйте сокращение container, чтобы одновременно указать ему и тип, и имя:

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

Установка container-type на inline-size запрашивает размер встроенного направления родителя. В латинских языках, таких как английский, это будет ширина карточки, поскольку текст выстраивается слева направо.

Теперь вы можете использовать этот контейнер для применения стилей к любому из его дочерних элементов с помощью @container:

.card-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
 .card-child {
  grid-template-columns: 1fr;
 }
}

Посмотрим не результат

Кроме того, вы можете использовать значения единиц длины запроса контейнера так же, как и значения единиц измерения на основе области просмотра. Разница в том, что единицы контейнера соответствуют контейнеру, а не области просмотра. В следующем примере демонстрируется адаптивная типографика с использованием блоков запроса контейнера и функции clip() для задания минимального и максимального значения размера.

.card-child h2 {
  font-size: clamp(2rem, 15cqi, 4rem);
}

15cqi выше относится к 15% встроенного размера контейнера. Функция clip() дает минимальное значение 2rem и максимальное значение 4rem. Между тем, если 15cqi находится между этими значениями, текст соответственно будет уменьшаться и увеличиваться.

/Оригинал статьи на английском — Container queries land in stable browsers