Zapowiedź CSS Container Queries
Od jakiegoś czasu można zaobserwować w świecie dev nowy trend lub podejście do tworzenia stron www. Mowa tu o planowanym wprowadzeniu „CSS Container Queries” do obsługi elastycznych layoutów. Tworząc projekt responsywny, często używa się zapytania @media, aby zmienić układ elementów w zależności od rozmiaru widocznego obszaru.
[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ę.
Przeczytaj także

CSS Container Queries już działa!
Container Queries już działa! Zapowiedzi potwierdziły się i mamy już możliwość korzystania z tego rozwiązania w najnowszych, stabilnych wersjach przeglądarek.

Kolory LCH to przyszłość w CSS?
Jednostki LCH są to nowe jednostki kolorów CSS, które są częścią specyfikacji CSS Color Level 4. Dają one dużo większe możliwości niż np. HEX czy RGB.

Nowa składnia media query w CSS
Budowanie nowoczesnego designu strony powinno być oparte o poprawne wypełnienie ekranu treścią i przedstawienie jej w efektowny sposób. Z pomocą przychodzi nam tutaj technika zwana @media query.