Zapowiedź CSS Container Queries

[Aktualizacja: 22.02.2023]

Container Queries został wydany w najnowszych, stabilnych wersjach przeglądarek.

Jaki problem rozwiązuje Container Queries?

Tworząc layout (na ogół) potrzebujemy bazować na szerokości okna przeglądarki, tzw. viewport. Jednak zdarza się, że potrzebujemy uzależnić treść danego elementu od wielkości obszaru (kontenera), w którym się znajduje. Dokładnie ten problem rozwiązuje podejście „Container Queries”, co jest uzasadnione w przypadku np. kafelków, kart czy obiektów w artykułach.

Pojawi się w przyszłości, bądźmy przygotowani.

Na chwilę obecną (27.05.2021) opcja jest w fazie testów, jednak została udostępniona pod koniec marca 2021 w Google Chrome „Canary”. Oczywiście już teraz warto zapoznać się z działaniem tych zapytań i wiedzieć jak one działają. W serwisie Caniuse.com jest zawarte wsparcie dla poszczególnych przeglądarek, polecam to śledzić.

Jak to działa?

Obecnie pracujemy nad wieloma wersjami układu strony internetowej w zależności od szerokości okna przeglądarki. Tworzymy różne wielkości elementów na takie urządzenia jak telefony komórkowe, tablety i desktopy. W kodzie natomiast wygląda to następująco:

.container {
  display: flex;
  width: 100%;
  margin: 0 auto;
  padding: 20px 15px;
}
@media screen and (min-width: 768px) {
  .container {
    max-width: 480px;
  }
}
@media screen and (min-width: 992px) {
  .container {
    max-width: 600px;
  }
}

Powyższy przykład kontenera jest dzisiejszym standardem, wpisuje się w metodę „mobile-first”. Nie zawiera on jednak w sobie żadnych komponentów, a to właśnie o nie nam chodzi. Musimy przecież je pokazać odpowiednio na różnych urządzeniach bazując na tym samym kodzie HTML.

W przypadku podejścia Container Queries wygląd/układ komponentów możemy spokojnie obsłużyć z poziomu rodzica.

.container {
  contain: layout inline-size;
}

@container (min-width: 700px) {
  .card {
    display: grid;
	  grid-template-columns: 2fr 1fr;
  }
}

Oto i przykład wykorzystania omawianej metody. W przypadku, gdy rodzic klasy .card będzie większy niż 700px nasz komponent .card otrzyma odpowiednie właściwości.

Podsumowanie

Jak widać po zapowiedziach i przykładach działania metoda tworzenia elastycznych layoutów Container Queries przyniesie wiele ciekawych rozwiązań. Warto się zainteresować i obserwować tą technologię.