Container queries : dimensionner les composants selon leur conteneur plutôt que le viewport

Ce que c'est

Une media query demande quelle est la largeur du viewport ; une container query demande quelle est la largeur d'un ancêtre particulier. Un élément devient un conteneur de requête avec container-type: inline-size (requêtes sur l'axe en ligne) ou size (les deux axes), éventuellement nommé avec container-name. Les règles à l'intérieur de @container (width > 40em) { .card { … } } s'appliquent aux descendants selon l'ancêtre le plus proche disposant d'un contexte de containment, ou l'ancêtre nommé lorsqu'un nom est donné. MDN liste des unités relatives au conteneur (cqw, cqh, cqi, cqb, cqmin, cqmax), chacune valant 1 % de la dimension du conteneur, utilisables partout où une longueur est acceptée, par exemple dans font-size.

Pourquoi c'est important

Un composant placé dans une barre latérale, une colonne principale et une modale ne peut pas déduire l'espace dont il dispose à partir de la largeur du viewport. Avec des points de rupture liés au viewport, chaque emplacement nécessite ses propres surcharges ; avec les container queries, le composant porte ses points de rupture et s'adapte partout où il est déposé. C'est ce qui rend les composants d'un système de design réutilisables entre des mises en page, et non seulement entre des pages.

Comment l'appliquer

• Faire du conteneur (wrapper) le container, et non le composant lui-même. Un élément ne peut pas répondre à sa propre taille : le contenu changerait la taille et ferait basculer la requête, ce que MDN décrit comme une boucle sans fin, raison pour laquelle le containment de taille est appliqué.
• Préférer inline-size. La valeur size contient aussi l'axe de bloc, si bien que l'élément cesse de grandir avec son contenu à moins d'avoir une hauteur explicite.
• Nommer les conteneurs lorsque des composants s'imbriquent (container-name: card) et interroger par nom, afin qu'une requête interne ne corresponde pas à un ancêtre non voulu.
• Utiliser cqi pour la typographie et les espacements fluides à l'intérieur d'un composant, enveloppés dans clamp() afin que les extrêmes restent lisibles.
• Conserver les media queries de viewport pour la mise en page au niveau de la page (nombre de colonnes, navigation) et les container queries pour les composants ; les deux coexistent.
• Les points de rupture à l'intérieur de @container doivent être des valeurs littérales, les propriétés personnalisées n'étant pas autorisées dans les conditions de requête ; les regrouper à un seul endroit par composant.

Pièges

Le containment modifie la mise en page : la largeur d'un conteneur inline-size doit provenir du contexte (un élément de type bloc qui s'étire jusqu'à son parent) ou être définie explicitement, sinon il s'effondre et la requête ne correspond jamais. Les container style queries (@container style(--x: y)) sont une fonctionnalité distincte ; vérifier leur prise en charge séparément de celle des requêtes de taille. Un conteneur de requête dont la taille est elle-même déterminée par ses enfants (un élément flex avec flex: 0 0 auto, une boîte en position absolue sans largeur) est la cause habituelle du cas où « la requête ne se déclenche jamais ».