Container Queries CSS : Le guide complet du responsive design

Depuis des années, le responsive design repose sur les media queries. Ces dernières ont permis d’adapter les sites web à la taille des écrans, offrant une expérience fluide sur mobile, tablette ou ordinateur. Pourtant, cette méthode atteint ses limites dès que l’on travaille sur des composants indépendants, utilisés dans des contextes variés.
Imaginez une carte produit, un encart d’article ou un composant de profil. Vous souhaitez qu’il s’adapte non pas à la taille de la fenêtre du navigateur, mais à l’espace disponible dans son conteneur. Avec les media queries traditionnelles, cela était impossible.

C’est ici qu’interviennent les container queries — une innovation majeure du CSS, longtemps attendue par les développeurs front-end. Grâce à elles, il est désormais possible de créer des composants réellement autonomes, capables de s’adapter à leur contexte d’affichage et non plus seulement à la taille globale de l’écran.

Dans ce guide complet, vous allez apprendre ce que sont les container queries, comment les utiliser efficacement, dans quels cas elles sont pertinentes, et quelles sont leurs limites actuelles. À la fin de cette lecture, vous saurez non seulement les implémenter, mais surtout comprendre la philosophie de conception qu’elles apportent : celle du responsive component.

Comprendre ce que sont les Container Queries

Une container query (ou requête de conteneur) est une nouvelle fonctionnalité du CSS qui permet de changer le style d’un élément en fonction des dimensions ou des propriétés de son conteneur parent.
Autrement dit, au lieu de dire « si la fenêtre mesure moins de 800px, applique ce style », on dit désormais « si le bloc parent mesure moins de 600px, adapte le style de cet élément ».

Cela change tout !

En effet, les composants web modernes (cartes, boutons, grilles, blocs de navigation) sont souvent réutilisés dans différents contextes : une carte produit peut apparaître dans une grille à trois colonnes sur desktop, mais dans une colonne unique dans une sidebar. Grâce aux container queries, cette carte peut s’adapter automatiquement à la largeur de son conteneur sans dépendre de la taille du viewport.

Une révolution du design modulaire

L’arrivée des container queries transforme profondément la manière dont on conçoit l’architecture CSS.
Jusqu’à présent, le responsive design était global : les media queries s’appliquaient à l’ensemble de la page. Avec les container queries, le design devient local, centré sur chaque composant.

On entre ainsi dans une approche dite component-driven, où chaque élément devient autonome et capable de se redimensionner selon son environnement. Cela ouvre la voie à des systèmes de design réutilisables, où les composants ne cassent plus leur mise en page selon le contexte.

Syntaxe de base

Pour utiliser une container query, deux étapes sont nécessaires :

1. Déclarer un élément comme étant un container grâce à la propriété container-type.
2. Écrire une container query qui cible les éléments internes selon les dimensions de ce conteneur.

Voici un exemple minimaliste :

.card {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 600px) {
  .card-content {
    display: flex;
  }
}

Dans cet exemple, .card devient un conteneur nommé card. Si la largeur (inline-size) de ce conteneur dépasse 600 pixels, le contenu interne passe en flex.
Ainsi, chaque carte s’adapte à sa propre taille, indépendamment de la fenêtre globale.

Pourquoi utiliser les Container Queries ?

Les media queries sont puissantes mais limitées. Elles fonctionnent uniquement selon les dimensions du viewport, c’est-à-dire de la fenêtre du navigateur. Cela signifie que deux composants identiques peuvent avoir un comportement différent selon l’endroit où ils se trouvent, même si leur propre largeur diffère.

Prenons un exemple concret : une carte produit utilisée dans une grille large et une autre dans une colonne étroite. Avec les media queries, vous devez souvent écrire des exceptions, des règles spécifiques ou des styles complexes pour gérer les deux cas.
Les container queries, elles, suppriment cette dépendance au contexte global.

Des composants réellement réutilisables

L’un des plus grands avantages des container queries est de rendre vos composants véritablement autonomes.
Chaque élément peut désormais être stylisé en fonction de son propre environnement, ce qui favorise la création de bibliothèques de composants flexibles et cohérentes.

Dans un framework comme React, Vue ou Svelte, où les composants sont pensés pour être modulaires, les container queries deviennent un outil indispensable.
Elles permettent à vos composants de s’intégrer harmonieusement dans n’importe quelle mise en page sans adaptation manuelle.

Une maintenance CSS facilitée

Lorsqu’on travaille sur un site complexe, les media queries peuvent rapidement devenir difficiles à maintenir.
Les container queries simplifient le code CSS en le recentrant sur le composant, plutôt que sur la structure globale du site.
Cela rend votre feuille de style plus claire, plus localisée, et réduit les effets de bord.

Les avantages et les limites des Container Queries

Les container queries représentent une évolution majeure dans la manière de concevoir le responsive design.
Voici les principaux bénéfices que vous pouvez en tirer.

1. Un design réellement contextuel

Avec les media queries, tout dépend de la taille de la fenêtre du navigateur. Cela posait problème lorsque le même composant devait apparaître dans différents contextes : une carte affichée dans une grille, une sidebar ou un bloc étroit pouvait perdre toute cohérence.
Grâce aux container queries, chaque composant réagit désormais à son espace disponible, pas à l’écran. C’est un changement de paradigme.

2. Une modularité renforcée

Les développeurs qui travaillent avec des design systems savent à quel point la réutilisabilité est essentielle.
En rendant chaque bloc autonome, les container queries permettent de créer des composants plug-and-play, capables de s’adapter à n’importe quel environnement sans devoir réécrire du CSS.

3. Un code plus clair et plus maintenable

Les media queries tendent à s’accumuler au fil du temps : @media (max-width: 768px) ici, @media (min-width: 1024px) là-bas…
Avec les container queries, les règles CSS liées à un composant restent dans le même fichier ou à proximité directe de ce composant.
Résultat : moins de duplication, moins de casse, et une meilleure lisibilité du code.

4. Une synergie naturelle avec les frameworks modernes

React, Vue, Svelte ou encore Web Components fonctionnent déjà sur le principe de l’encapsulation. Les container queries s’inscrivent parfaitement dans cette logique.
Elles permettent à chaque composant d’être stylisé de manière indépendante, sans dépendre de la taille du viewport global.

5. Une expérience utilisateur plus fluide

Un composant bien dimensionné dans son contexte évite les sauts visuels, les chevauchements et les espacements forcés.
Les container queries rendent donc le responsive design plus précis, plus harmonieux, et visuellement plus cohérent pour l’utilisateur.

Les limites actuelles

Bien qu’elles soient révolutionnaires, les container queries ont encore certaines contraintes qu’il faut connaître avant de les adopter pleinement.

1. Compatibilité des navigateurs

Aujourd’hui, les container queries sont prises en charge par tous les navigateurs modernes (Chrome, Edge, Firefox, Safari).
Cependant, pour des projets nécessitant une compatibilité avec d’anciennes versions, il faut prévoir un fallback ou un comportement par défaut.
Le site caniuse.com vous permettra de vérifier la compatibilité selon vos besoins.

2. Performance et complexité

Chaque container défini crée un contexte d’évaluation supplémentaire. Sur des pages contenant des centaines de composants, cela peut légèrement impacter les performances si c’est mal géré.
Heureusement, pour des sites bien structurés, cet effet reste minime.

3. Syntaxe encore nouvelle pour certains développeurs

Les container queries introduisent de nouvelles propriétés (container-type, container-name, @container).
Cela nécessite un petit temps d’adaptation, notamment pour bien comprendre la différence entre les dimensions du conteneur et celles du viewport.

4. Limitation sur les types de requêtes

Les container queries ne prennent pas encore en charge tous les types de conditions disponibles dans les media queries.
Elles se concentrent principalement sur la taille du conteneur (width, height, inline-size, block-size).
Cependant, la spécification CSS évolue rapidement, et d’autres propriétés pourraient être ajoutées à l’avenir.

Comment utiliser les Container Queries

Nous allons maintenant passer à la pratique.
Vous allez apprendre étape par étape comment mettre en place une container query, comprendre sa logique et éviter les erreurs fréquentes.

1. Définir un conteneur :

Pour qu’un élément puisse être la référence d’une container query, il faut d’abord le déclarer comme conteneur.
Cela se fait grâce à la propriété container-type.

Voici les trois valeurs possibles :

• inline-size : observe uniquement la largeur du conteneur.
• size : observe la largeur et la hauteur.
• normal : valeur par défaut, sans effet particulier.

Exemple :

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

.card {
  container-type: inline-size;
}

Ici, .card devient un conteneur observé selon sa largeur.
Tout élément à l’intérieur pourra réagir à la taille de ce conteneur.

2. Nommer un conteneur (facultatif mais conseillé) :

Vous pouvez attribuer un nom à votre conteneur avec container-name.
Cela devient utile lorsqu’il existe plusieurs conteneurs imbriqués.

.card {
  container-type: inline-size;
  container-name: product-card;
}

Écrire une container query

Une fois le conteneur défini, on peut utiliser la règle @container pour cibler les éléments internes selon les conditions.

@container product-card (min-width: 600px) {
  .product-title {
    font-size: 1.5rem;
  }
}

Ici, dès que la carte produit atteint 600 pixels de largeur, le titre devient plus grand.
Si la carte se rétrécit (par exemple dans une colonne plus étroite), le style revient automatiquement à sa version par défaut.

Exemple complet :

Prenons un exemple concret de carte produit responsive grâce aux container queries.

HTML :

<div class="card">
  <img src="image.jpg" alt="Produit">
  <h2 class="title">Titre du produit</h2>
  <p class="description">Description du produit</p>
</div>

CSS :

.card {
  container-type: inline-size;
  container-name: card;
  background: #f9f9f9;
  padding: 1rem;
  border-radius: 8px;
}

.card img {
  width: 100%;
  border-radius: 6px;
}

.card .title {
  font-size: 1.2rem;
  margin-top: 0.5rem;
}

@container card (min-width: 600px) {
  .card {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .card img {
    width: 200px;
  }

  .card .title {
    font-size: 1.5rem;
  }
}

Dans cet exemple, si la carte mesure moins de 600px, elle reste en mode « bloc ».
Dès qu’elle dépasse cette largeur, elle passe en affichage horizontal avec display: flex.
C’est le conteneur qui décide, pas la taille de l’écran.

Le piège du display: contents

Un détail important : un élément défini comme container-type ne peut pas avoir display: contents.
En effet, ce type d’affichage supprime la boîte de rendu du conteneur, rendant impossible la mesure de ses dimensions.
Si vous rencontrez un comportement inattendu, vérifiez donc que ce n’est pas le cas.

Combiner container queries et media queries

Les container queries ne remplacent pas totalement les media queries.
Les deux approches sont complémentaires.
Les media queries gèrent l’adaptation globale du site (menu, grille, navigation), tandis que les container queries gèrent l’adaptation locale des composants.

Par exemple :

@media (min-width: 1024px) {
  main {
    display: grid;
    grid-template-columns: 1fr 3fr;
  }
}

@container (min-width: 400px) {
  .sidebar-item {
    display: flex;
  }
}

Ici, la media query adapte la structure générale, tandis que la container query adapte les éléments internes selon leur propre largeur.

Les units cq, cqw, cqh

Pour aller encore plus loin, CSS introduit de nouvelles unités relatives aux container queries :

• cqw (container query width) : 1% de la largeur du conteneur
• cqh (container query height) : 1% de la hauteur du conteneur
• cqmin, cqmax : équivalents à vmin et vmax, mais basés sur le conteneur

Exemple :

.card img {
  width: 50cqw;
}

Ainsi, l’image occupera 50 % de la largeur du conteneur, peu importe sa taille réelle.

Quand utiliser les Container Queries ?

Les container queries sont particulièrement utiles lorsque vous avez des composants réutilisables :

• des cartes produits dans une boutique en ligne,
• des encarts d’articles de blog,
• des widgets ou modules insérés dans différents layouts,
• des composants d’interface (boutons, cartes, menus) intégrés dans plusieurs contextes.

Elles s’avèrent aussi précieuses lorsque vous travaillez sur un design system ou une librairie de composants, car elles garantissent que chaque bloc se comporte de manière prévisible selon sa taille, sans ajustement manuel.

Les cas où elles ne sont pas nécessaires

Si vous travaillez sur une page simple sans structure modulaire, ou si vos éléments dépendent tous de la même largeur d’écran, les media queries suffisent.
De même, pour les ajustements globaux (menu, typographie principale, grille de page), les container queries seraient excessives.

Une approche complémentaire et progressive

La meilleure stratégie consiste à adopter les container queries progressivement.
Commencez par les intégrer sur des composants isolés.
Ensuite, étendez leur utilisation aux sections modulaires.
Enfin, lorsque votre site adopte une architecture plus orientée composant, elles deviendront un réflexe naturel.

Cas pratique

Imaginons que vous développiez un site de blog moderne, avec des cartes d’articles affichées sur la page d’accueil et dans la sidebar.
Vous souhaitez qu’elles s’adaptent automatiquement à leur espace, sans écrire de media queries globales.

HTML :

<section class="articles">
  <div class="article-card">
    <img src="photo.jpg" alt="illustration">
    <div class="content">
      <h3>Titre de l’article</h3>
      <p>Résumé court de l’article à découvrir</p>
    </div>
  </div>
</section>

CSS :

.article-card {
  container-type: inline-size;
  container-name: article;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

.article-card img {
  width: 100%;
  display: block;
}

.article-card .content {
  padding: 1rem;
}

@container article (min-width: 500px) {
  .article-card {
    display: flex;
    align-items: center;
  }

  .article-card img {
    width: 40%;
  }

  .article-card .content {
    padding: 2rem;
  }

  .article-card h3 {
    font-size: 1.5rem;
  }
}

Résultat :

• Dans une grande grille, la carte s’étend horizontalement avec l’image à gauche.
• Dans une colonne étroite (comme une sidebar), elle se réorganise automatiquement à la verticale.
  Aucune media query globale n’est nécessaire.
  La carte est entièrement autonome, réutilisable partout sur votre site.

Un pas décisif vers le CSS de demain

Les container queries marquent une véritable étape dans l’évolution du CSS.
Elles ne sont pas une simple fonctionnalité supplémentaire : elles représentent un changement de philosophie dans la manière de concevoir les interfaces.

Grâce à elles, vous pouvez désormais penser vos composants comme des entités intelligentes, capables de s’adapter à leur environnement sans dépendre du reste de la page.

Elles rendent le design plus modulaire, plus maintenable et plus cohérent, tout en allégeant le code CSS global.

Elles s’intègrent parfaitement aux frameworks modernes et s’imposent peu à peu comme une pratique standard pour les projets web d’aujourd’hui et de demain.

Alors, si vous souhaitez que vos composants soient vraiment autonomes, flexibles et réutilisables, commencez dès maintenant à explorer les container queries.
Elles incarnent le futur du responsive design — un futur où chaque composant s’adapte à son conteneur, et non plus à votre écran.

Alban

Fondateur de l’agence Créa-troyes.
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr