CSS Container Queries już działa!

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:

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.