css

Czy wiesz, czym są container queries?

23 sierpnia 2024

Container queries to mechanizm analogiczny do media queries, działający na elementach DOM, a nie parametrach przeglądarki. Pozwala odpytać o parametry kontenera i ostylować zawarty w nim element zgodnie z tymi parametrami.

Aby oznaczyć element jako kontener, należy ustawić regułę container-type. Do dyspozycji mamy 3 wartości:

  • size - podczas stylowania względem tego kontenera będzie brana zarówno szerokość jak i wysokość elementu oraz jego style,
  • inline-size - podczas stylownia będzie brany pod uwagę tylko wymiar inline-size (czyli szerokość przy domyślnie ustawionym writing-mode),
  • normal - podczas stylowania będą brane pod uwagę jedynie style kontenera.

Mając tak zdefiniowaną strukturę HTML:

<div class="container">
    <div class="intermediate-container">
        <div class="box"></div>
    </div>
</div>

oraz następujące style CSS:

.container {
  container-type: size;
  height: 500px;
  width: 75vw;
  background: yellowgreen;
}
 
.box {
  height: 100px;
  width: 100px;
  background: yellow;
}

element .box może zostać ostylowany względem aktualnej szerokości kontenera. Przykładowo:

@container parent (min-width: 400px) {
  .box {
    background: red;
  }
}

W tym przypadku, jeśli kontener będzie większy niż 400px, element box pozostanie żółty. Jeśli kontener będzie szerszy, kolor elementu box zmieni się na czerwony.

Co jeżeli mamy wiele zagnieżdżonych kontenerów i chcemy odwołać się do któregoś konkretnego?

Domyślnie pod uwagę brany jest kontekst najbliższego kontenera, jednak można to zmienić poprzez ustawienie reguły container-name z wybraną nazwą kontenera. Przykładowo:

.container {
  container-type: size;
  container-name: parent-container
}
 
@container parent-container (min-width: 700px) {
    /* ... */
}

Dzięki tej regule możemy odwoływać się do kontenerów, które są wyżej niż najbliższy naszemu elementowi.

Przykład w wersji wykonywalnej: https://codesandbox.io/s/css-container-queries-complete-example

Najnowsze wpisy