Les media queries permettent d'adapter une interface à la taille de l'écran. C'est généralement suffisant, mais un composant peut aussi être placé dans une zone beaucoup plus étroite, comme une sidebar. Les container queries permettent alors d'appliquer des règles selon la taille de son conteneur plutôt que celle du viewport.
Déclarer un conteneur
Pour commencer, on indique sur l'élément parent qu'il devient un conteneur avec container-type. La valeur inline-size permet de baser les conditions sur sa largeur. La valeur size permet de prendre aussi sa hauteur en compte.
Utiliser une container query
La syntaxe est proche d'une media query, mais on utilise @container. On peut par exemple afficher un formulaire sur deux colonnes dès que son conteneur dépasse 400 pixels de large.
Si la sidebar est trop étroite, le formulaire reste sur une seule colonne. Lorsqu'elle grandit, la règle s'applique automatiquement.
Il faut faire attention à un point : une container query est ignorée lorsqu'aucun ancêtre n'est déclaré comme conteneur. Pour un composant affiché dans la partie principale de la page, on peut alors ajouter container-type: inline-size au body.
Conteneurs nommés
On peut donner un nom à un conteneur avec container-name afin de cibler un contexte précis.
Cette règle se base uniquement sur le conteneur nommé body, même si le composant est aussi contenu dans une sidebar. Ce mécanisme peut aussi servir à cibler un type de conteneur sans ajouter de condition (même si un sélecteur CSS donnerait parfois le même résultat).
Les unités relatives au conteneur
Déclarer un conteneur donne aussi accès à des unités comme cqi, cqb ou cqw, qui permettent de dimensionner un élément relativement à son conteneur. Par exemple, 50cqi correspond à 50 % de l'inline size, donc de la largeur dans ce cas.
L'inline size correspond à la largeur de référence du conteneur (sans ajouter le padding et les bordures). Pour dimensionner aussi selon la hauteur, il faut utiliser container-type: size. Une hauteur de 50cqb représentera alors la moitié de la taille du conteneur sur cet axe.
Ces unités sont plus prévisibles que des pourcentages lorsque l'on veut viser explicitement le conteneur le plus proche. Les pourcentages dépendent en effet du contexte de la propriété utilisée. À l'inverse des container queries, les unités de conteneur fonctionnent même sans conteneur déclaré : dans ce cas, cqi se base sur la largeur de l'écran.
Pour retrouver l'ensemble des unités et de leurs valeurs, vous pouvez consulter la documentation MDN sur les container queries.