Une carte de produit affichée dans une colonne étroite d’une barre latérale, puis la même carte réutilisée en pleine largeur ailleurs sur le site : avec une simple media query, impossible de lui donner deux styles différents selon son contexte, puisque la largeur de la fenêtre reste identique dans les deux cas. C’est exactement le problème que résout cette fonctionnalité, plus récente que les media queries traditionnelles.
Déclarer un conteneur avant de l’interroger
Il faut d’abord désigner un élément comme conteneur avec la propriété container-type (souvent inline-size, qui ne surveille que la largeur), éventuellement lui donner un nom via container-name. La règle @container peut alors cibler ce contexte précis plutôt que le viewport entier, ce qui rend un composant réellement autonome et réutilisable, un atout précieux pour les composants réutilisables de l’éditeur de blocs WordPress.
Exemple
.colonne-laterale {
container-type: inline-size;
container-name: barre-laterale;
}
@container barre-laterale (min-width: 300px) {
.carte-produit { display: flex; }
}
Bon à savoir
- Un élément ne peut pas s’interroger lui-même : les règles
@containers’appliquent aux descendants du conteneur déclaré, jamais au conteneur lui-même. - Le support navigateur est large depuis 2023, mais reste plus récent que celui des media queries classiques : un site devant supporter des navigateurs plus anciens doit prévoir un repli.
- Ne confondez pas cette fonctionnalité avec les unités de conteneur (
cqw,cqh), qui permettent de dimensionner un élément proportionnellement à son conteneur sans même écrire de règle@container.