Container queries: komponent, który sam wie, ile ma miejsca

Ta sama karta artykułu trafia na stronę główną, do wąskiej kolumny bocznej i do siatki trzech kolumn. Media queries nie pomogą: ekran jest wszędzie tak samo szeroki, zmienia się tylko miejsce, które dostał komponent. Właśnie do tego są container queries — od 2023 roku działają we wszystkich nowoczesnych przeglądarkach.

Dwa kroki: kontener i zapytanie

Najpierw mówimy, który element jest kontenerem. inline-size oznacza, że interesuje nas szerokość (i że przeglądarka nie musi mierzyć wysokości, co byłoby kosztowne).

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

Potem piszemy style zależne od szerokości tego kontenera, a nie okna.

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

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

Wstaw tę kartę do kolumny o szerokości 300 px — będzie pionowa. Do treści o szerokości 800 px — obrazek stanie obok tekstu. Bez jednej linijki JavaScriptu i bez klas typu card--horizontal.

Jednostki względem kontenera

Razem z zapytaniami przyszły jednostki: cqi to 1% szerokości kontenera. Świetnie nadają się do typografii, która ma rosnąć razem z komponentem, a nie z całym ekranem.

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

Na co uważać

• Element nie może odpytywać samego siebie — zapytanie dotyczy najbliższego przodka-kontenera. Dlatego potrzebny jest wrapper.
• container-type: size wymaga znanej wysokości; w 95% przypadków wystarczy inline-size.
• Nazywaj kontenery. Bez nazwy zapytanie trafi w najbliższy kontener, który nie zawsze jest tym, o którym myślisz.

A style queries?

Istnieje też @container style(--wariant: ciemny), czyli zapytania o wartości zmiennych CSS. Obsługa jest jeszcze nierówna, więc przed użyciem na produkcji sprawdź aktualny stan na caniuse.com. Same zapytania o rozmiar są już bezpieczne.