Jakiś czas temu pisałem artykuł jako zapowiedź wdrożenia container queries do przeglądarek w wydaniach „beta”. Doczekaliśmy się tego rozwiązania w przeglądarkach w wersjach stabilnych!
Dokumentacja także opisuje składnię i działanie tego mechanizmu.
Teoria
Ograniczają one także liczbę używanych klas i selektorów, dzięki czemu można łatwiej i szybciej edytować styl strony.
Poniżej kod CSS, który pokazuje działanie tego mechanizmu:
.container {
display: flex;
width: 100%;
max-width: 800px;
margin: 20px auto;
padding: 20px 15px;
border: 1px solid #aaa;
container: card / inline-size;
}
.card {
width: 100%;
border: 1px solid #eee;
color: #aaa;
padding: 10px 20px;
margin: 20px auto;
}
@container (min-width: 768px) {
.card {
max-width: 480px;
}
}
Precyzując, domyślnie .container
ma szerokość 100%. W przypadku szerokości (zawartości) kontenera większej niż 768 pikseli, .card
będzie ograniczony do szerokości 480 pikseli.
Praktyka
Skoro już wiemy jak to działa finalnie, oto przykład:
dark
Wsparcie przeglądarek
Container queries są wspierane przez najnowsze wersje przeglądarek, w tym Chrome, Safari i Firefox. Niestety starsze wydania będą musiały obejść się smakiem i trzeba tam skorzystać ze „starego rozwiązania” jakim jest @media query.
Przeczytaj także

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.

Piszemy chat Facebooka w CSS
Każdy użytkownik posiadający konto w popularnym serwisie społecznościowym Facebook zna to okienko. Mowa tutaj oczywiście o oknie wiadomości z innym użytkownikiem. Dzisiaj postaram się pokazać, jak zbudować taki czat w czystym CSS, bez zbędnych kombinacji. Zapraszam do lektury.