Pendant des années, le responsive design a reposé sur une seule question : quelle est la largeur de l'écran ? Les media queries y répondent très bien, mais elles posent problème dès qu'un même composant apparaît à plusieurs endroits. Une carte d'article n'a pas la même place dans une grille à trois colonnes que dans une barre latérale, alors que l'écran est le même. Les container queries règlent ce problème : un composant s'adapte à la place que lui donne son conteneur. Elles fonctionnent dans tous les navigateurs modernes depuis février 2023.
Pourquoi les media queries ne suffisent plus
Prenons une carte d'article avec une image et un texte. Sur un grand écran, dans la zone principale, on la veut horizontale : image à gauche, texte à droite. Dans une barre latérale étroite du même grand écran, elle doit s'empiler verticalement. Avec des media queries, il faut écrire des variantes : .card--sidebar, .card--wide… et penser à appliquer la bonne classe partout.
C'est contraire à l'esprit d'un design system, où chaque composant devrait se comporter correctement où qu'on le place.
La syntaxe des container queries
Déclarer un conteneur
On indique d'abord quel élément sert de référence, avec la propriété container-type :
.card-wrapper {
container-type: inline-size;
container-name: card;
}
La valeur inline-size signifie que l'on interroge la largeur (dans les langues qui s'écrivent horizontalement). La valeur size interroge aussi la hauteur, mais elle impose de fixer la hauteur du conteneur : elle sert rarement.
Le nom est facultatif, mais je le recommande : il évite qu'un composant réagisse par erreur à un conteneur parent imprévu.
Écrire la requête
.card {
display: grid;
gap: 1rem;
}
@container card (min-width: 32rem) {
.card {
grid-template-columns: 12rem 1fr;
align-items: center;
}
}
La carte passe en disposition horizontale dès que son conteneur dépasse 32 rem, quelle que soit la taille de l'écran. Placez la même carte dans une colonne de 20 rem et elle reste empilée, sans aucune classe supplémentaire.
Une contrainte à connaître : un élément ne peut pas interroger sa propre taille. On applique donc container-type sur un parent, et les styles conditionnels sur les enfants.
Les unités de conteneur
Les container queries apportent aussi des unités relatives au conteneur : cqi (1 % de la largeur du conteneur), cqb (1 % de sa hauteur), ainsi que cqmin et cqmax. Elles sont parfaites pour une typographie qui suit la taille du composant :
.card-title {
font-size: clamp(1.1rem, 4cqi, 1.6rem);
}
Le titre grandit avec la carte, mais reste borné entre deux valeurs lisibles. C'est le même principe que les unités vw, appliqué au composant plutôt qu'à la fenêtre. Pour aller plus loin sur les tailles de texte, voir mon guide de la typographie web.
Des cas d'usage concrets
- Les cartes de contenu réutilisées dans des grilles, des carrousels et des barres latérales ;
- Les widgets de tableau de bord que l'utilisateur peut redimensionner ;
- Les blocs d'un constructeur de pages (Gutenberg, par exemple), dont on ne connaît jamais la largeur finale ;
- Les formulaires qui passent d'une colonne à deux selon la place disponible ;
- Les en-têtes de tableau qui masquent des colonnes secondaires quand l'espace se réduit.
Container queries et media queries : les deux ont leur place
Les container queries ne remplacent pas les media queries. Je les répartis ainsi :
| Besoin | Outil |
|---|---|
| Disposition générale de la page (colonnes, menu, marges) | Media queries |
| Comportement interne d'un composant | Container queries |
| Préférences de l'utilisateur (mode sombre, animations réduites) | Media queries |
Compatibilité et repli
Les container queries de taille sont prises en charge par Chrome et Edge depuis la version 105, Safari 16 et Firefox 110, ce qui en fait une fonctionnalité « Baseline » depuis février 2023, selon MDN. Pour les rares navigateurs plus anciens, il suffit d'écrire le style par défaut en mode empilé : la version horizontale vient en amélioration progressive.
Une variante plus récente, les style queries, permet d'interroger la valeur d'une propriété personnalisée du conteneur. Sa prise en charge est encore incomplète : je vous conseille d'attendre avant de l'utiliser en production.
Ce que ça change dans mes projets
Depuis que j'utilise les container queries, mes feuilles de style contiennent moins de variantes de composants et moins de classes conditionnelles dans les gabarits. Les clients qui composent leurs pages dans l'administration peuvent placer un bloc n'importe où sans casser l'affichage. Si vous préparez une refonte de site et souhaitez une base CSS moderne et facile à maintenir, n'hésitez pas à me contacter.
