Vous en avez marre de créer des composants qui fonctionnent parfaitement à un endroit, mais qui se cassent dès que vous les déplacez dans une barre latérale ? Vous passez votre temps à écrire des classes CSS complexes pour gérer chaque cas de figure ? Et si la solution était plus simple ?
Ce guide complet vous explique comment les CSS Container Queries changent la donne pour le responsive design. Vous allez apprendre à créer des composants qui s’adaptent non pas à la page, mais à leur propre espace disponible.
Le problème : Pourquoi les Media Queries ne suffisent plus
Jusqu’à présent, le responsive design reposait entièrement sur les Media Queries. Le principe est simple : on applique des styles différents en fonction de la taille de l’écran (le viewport). Ça marche bien pour adapter la mise en page globale d’un site, par exemple passer de 3 colonnes sur un grand écran à une seule sur mobile.
Mais le problème apparaît au niveau des composants. Imaginez une carte produit avec une image à gauche et du texte à droite. Sur une page large, c’est parfait. Maintenant, vous voulez réutiliser cette même carte dans une colonne latérale plus étroite. Logiquement, vous voudriez que l’image passe au-dessus du texte. Avec les Media Queries, c’est compliqué. Elles ne s’intéressent qu’à la taille du viewport, pas à la taille de la colonne latérale. Le contexte local de votre composant est totalement ignoré.
- Votre CSS devient complexe et difficile à maintenir.
- Vous finissez par créer des variantes de vos composants (
.card--sidebar,.card--full-width). - Votre composant n’est plus vraiment réutilisable.
C’est quoi, une Container Query ? L’explication simple
Une Container Query, c’est tout simplement une « media query pour un élément ». Au lieu de poser la question « Quelle est la taille de la fenêtre du navigateur ? », la Container Query demande : « Quelle est la taille de l’élément parent dans lequel je me trouve ? ».
Le composant ne dépend plus de la page entière, mais uniquement de la taille de son conteneur parent. C’est ce qui lui permet de devenir véritablement modulaire et autonome. Peu importe où vous placez votre carte produit, elle s’adaptera parfaitement à l’espace qu’on lui donne, sans avoir besoin de code supplémentaire. C’est un changement de logique majeur pour le design de composants.
Comment utiliser les Container Queries : Guide pratique en 2 étapes
Mettre en place des Container Queries est assez direct. Le processus se fait en deux temps : d’abord on définit quel élément est un « conteneur », ensuite on applique des styles aux enfants de ce conteneur en fonction de sa taille.
Étape 1 : Définir un conteneur avec `container-type`
La première chose à faire est de signaler au navigateur quel élément servira de référence pour les requêtes. On utilise pour ça la propriété CSS container-type. Cet élément devient ce qu’on appelle un contexte de confinement (containment context).
La valeur la plus courante est inline-size. Elle indique que les enfants devront réagir aux changements de largeur du conteneur. Il existe aussi `size` (largeur et hauteur) et `normal`, mais vous utiliserez inline-size dans 99% des cas.
Voici comment déclarer un conteneur :
/* On sélectionne l'élément qui va "contenir" nos composants */
.post-container {
/* On dit au navigateur de surveiller sa largeur */
container-type: inline-size;
/* On peut aussi lui donner un nom, c'est utile pour les mises en page complexes */
container-name: blog-post;
}
C’est tout. L’élément avec la classe .post-container est maintenant un conteneur. Tous les éléments à l’intérieur pourront réagir à ses dimensions.
Étape 2 : Appliquer des styles avec la règle `@container`
Maintenant que le conteneur est défini, on peut appliquer des styles à ses enfants. La syntaxe est volontairement très proche de celle des Media Queries pour ne pas être dépaysé. On utilise la règle @container suivie d’une condition de taille.
Imaginons une carte (.card) à l’intérieur de notre .post-container. On veut qu’elle change de style quand son conteneur fait plus de 700px de large.
.card {
/* Style par défaut (pour les petits conteneurs) */
display: grid;
grid-template-columns: 1fr; /* Une seule colonne */
}
/* On applique la Container Query */
@container (min-width: 700px) {
.card {
/* Style pour les grands conteneurs */
grid-template-columns: 2fr 3fr; /* Passage à deux colonnes */
}
}
Dans cet exemple, si vous placez la .card dans un .post-container de 400px, elle sera sur une colonne. Si vous la mettez dans un conteneur de 800px, elle passera automatiquement sur deux colonnes. Le reste de la page n’a aucune importance. Pour plus de détails sur la syntaxe, la documentation officielle sur MDN reste la meilleure ressource.
Container Queries vs. Media Queries : Le tableau comparatif
Pour bien comprendre quand utiliser l’une ou l’autre, ce tableau résume les différences clés. Elles ne s’opposent pas, elles se complètent.
| Critère | Media Queries | Container Queries |
|---|---|---|
| Référence | Le viewport (la fenêtre du navigateur) | Un élément parent (le conteneur) |
| Logique | Macro-layout : s’occupe de la structure globale de la page. | Micro-layout : gère l’apparence d’un composant individuel. |
| Cas d’usage typique | Changer le nombre de colonnes principales, modifier la navigation pour mobile. | Adapter une carte, un widget ou un formulaire à l’espace disponible. |
| Dépendance | Indépendant des éléments HTML. | Nécessite de déclarer un conteneur avec container-type. |
3 Cas d’usage concrets où les Container Queries brillent
La théorie c’est bien, mais la pratique c’est mieux. Voici trois exemples concrets où l’utilisation des Container Queries simplifie énormément le CSS.
1. La Card Universelle
C’est l’exemple parfait. Une carte qui affiche une image et du texte. Sur un espace étroit, on empile les éléments. Sur un espace large, on les met côte à côte.
<div class="card-container">
<div class="product-card">
<img src="..." alt="Produit">
<div class="card-content">
<h3>Titre du produit</h3>
<p>Description courte...</p>
</div>
</div>
</div>
.card-container {
container-type: inline-size;
}
.product-card {
display: flex;
flex-direction: column; /* Vertical par défaut */
}
/* Quand le conteneur est assez large */
@container (min-width: 450px) {
.product-card {
flex-direction: row; /* On passe en horizontal */
}
}
Vous pouvez déplacer ce .card-container n’importe où, la carte s’adaptera sans une ligne de CSS supplémentaire. Vous pouvez tester ce code en direct sur CodePen pour voir le résultat.
2. Le Widget de Sidebar
Un bloc de « derniers articles » peut être affiché dans le flux principal de contenu ou dans une barre latérale. Son apparence doit changer radicalement.
<aside class="sidebar">
<!-- Ce conteneur est étroit -->
<div class="widget-wrapper">
<ul class="latest-posts">
<li>Article 1</li>
<li>Article 2</li>
</ul>
</div>
</aside>
.widget-wrapper {
container-type: inline-size;
}
.latest-posts li {
padding: 5px;
font-size: 14px;
}
/* Dans un conteneur plus large (ex: le corps principal) */
@container (min-width: 500px) {
.latest-posts li {
padding: 15px;
font-size: 18px;
border-bottom: 1px solid #eee;
}
}
Le même widget, placé dans une section principale plus large, aurait automatiquement des textes plus gros et plus d’espacement. Essayez de tester ce code en direct sur CodePen pour visualiser la différence.
3. Un Formulaire Adaptatif
Les formulaires sont souvent un casse-tête. On veut que les champs soient les uns en dessous des autres sur mobile, mais côte à côte sur de plus grands écrans pour gagner de la place.
<div class="form-container">
<form>
<div class="form-field">
<label for="name">Nom</label>
<input type="text" id="name">
</div>
<div class="form-field">
<label for="email">Email</label>
<input type="email" id="email">
</div>
</form>
</div>
.form-container {
container-type: inline-size;
}
form {
display: grid;
gap: 1rem;
}
/* Quand le formulaire a assez de place */
@container (min-width: 600px) {
form {
/* Deux colonnes pour les champs */
grid-template-columns: 1fr 1fr;
}
}
Le formulaire s’ajuste seul. C’est idéal pour les composants de formulaires intégrés dans différentes parties d’une application web. N’hésitez pas à tester ce code en direct sur CodePen.
Le support des navigateurs est-il suffisant en 2025 ?
La réponse est un grand oui. Depuis début 2023, les Container Queries sont supportées par tous les navigateurs modernes : Chrome, Firefox, Safari et Edge. Il n’y a plus de raison d’hésiter à les utiliser.
En 2025, cette fonctionnalité est considérée comme stable et prête pour la production. De nombreux frameworks et design systems l’ont déjà adoptée comme une pratique standard. Si vous démarrez un nouveau projet, vous pouvez les intégrer en toute confiance. Pour les projets plus anciens, vous pouvez toujours vérifier le support actuel sur CanIUse.com pour vous assurer de la compatibilité avec les versions de navigateurs que vous devez supporter.
FAQ – Questions fréquentes sur les CSS Container Queries
Quelle est la principale différence entre media et container queries ?
La media query regarde la taille de la fenêtre du navigateur (viewport). La container query regarde la taille de son élément parent direct (le conteneur). C’est la différence entre une vision globale (macro) et une vision locale (micro).
Peut-on nommer les conteneurs ?
Oui. Avec la propriété container-name, vous pouvez donner un nom à votre conteneur. C’est très utile quand vous avez des conteneurs imbriqués les uns dans les autres. Vous pouvez alors cibler un conteneur spécifique dans votre règle @container. Exemple : @container card-wrapper (min-width: 400px).
Y a-t-il un impact sur les performances ?
L’impact est considéré comme négligeable pour la plupart des usages. Les moteurs de rendu des navigateurs sont très optimisés pour gérer ces calculs. Sauf si vous avez des milliers de conteneurs qui changent de taille en permanence, vous ne remarquerez aucune différence.
Doit-on arrêter d’utiliser les media queries ?
Absolument pas. Les deux sont complémentaires.
- Utilisez les Media Queries pour le layout global de la page (ex: la grille principale, la navigation).
- Utilisez les Container Queries pour les composants individuels qui doivent être réutilisables (cartes, widgets, formulaires).
Les Container Queries ne remplacent pas les Media Queries, elles ajoutent un outil puissant à notre boîte à outils CSS. Elles nous permettent enfin de penser en termes de composants vraiment autonomes.
Le meilleur moyen de s’y mettre est d’expérimenter. Prenez un de vos composants existants et essayez de le rendre adaptatif avec une Container Query. Vous verrez rapidement à quel point cette approche simplifie la logique de votre CSS et rend vos interfaces plus robustes.
