Container queries: компонент, который сам знает, сколько у него места

Одна и та же карточка статьи попадает на главную, в узкую боковую колонку и в сетку из трёх колонок. Media queries не помогут: экран везде одинаково широкий, меняется только место, которое получил компонент. Именно для этого существуют container queries — с 2023 года они работают во всех современных браузерах.

Два шага: контейнер и запрос

Сначала говорим, какой элемент является контейнером. inline-size означает, что нас интересует ширина (и браузеру не нужно измерять высоту, что было бы дорого).

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

Затем пишем стили, зависящие от ширины этого контейнера, а не окна.

.card { display: grid; gap: 12px; }

@container card (min-width: 520px) {
  .card {
    grid-template-columns: 220px 1fr;
    align-items: start;
  }
}

Поставьте карточку в колонку шириной 300 px — она будет вертикальной. В контент шириной 800 px — изображение встанет рядом с текстом. Без единой строки JavaScript и без классов вроде card--horizontal.

Единицы относительно контейнера

Вместе с запросами появились единицы: cqi — это 1% ширины контейнера. Они отлично подходят для типографики, которая должна расти вместе с компонентом, а не со всем экраном.

.card h3 {
  font-size: clamp(1.1rem, 4cqi, 1.8rem);
}

На что обратить внимание

• Элемент не может запрашивать сам себя — запрос относится к ближайшему предку-контейнеру. Поэтому нужна обёртка.
• container-type: size требует известной высоты; в 95% случаев хватает inline-size.
• Давайте контейнерам имена. Без имени запрос попадёт в ближайший контейнер, а это не всегда тот, о котором вы думаете.

А style queries?

Есть ещё @container style(--variant: dark) — запросы к значениям CSS-переменных. Поддержка пока неравномерная, поэтому перед использованием в продакшене проверьте актуальное состояние на caniuse.com. Сами запросы по размеру уже безопасны.