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

Gradienty CSS – omówienie
Gradienty w CSS są szeroko stosowane w wielu miejscach, od tworzenia prostych tła po skomplikowane wzory, takie jak gradienty wielokolorowe.

Jak rozmyć tło w CSS?
Ciekawym rozwiązaniem na stronie internetowej może być element, który zawiera rozmyte tło. Można to uzyskać za pomocą właściwości CSS.

Spis treści w CSS
Istotą każdego spisu treści jest danie konkretnej informacji czytelnikowi, gdzie znajduje się dana zawartość tekstu. W tym artykule dowiesz się, jak stworzyć poprawnie spis treści w CSS, zachowując trzy podstawowe elementy.