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. Самі запити за розміром уже безпечні.