Les container queries révolutionnent la manière dont on conçoit des interfaces responsive. Là où les Media Queries se basent uniquement sur la taille du viewport, les container queries s’adaptent à la taille du composant parent, permettant un design plus modulaire, précis et réutilisable.

Des Media Queries aux Container Queries

Pendant des années, les Media Queries ont été la seule solution pour adapter le rendu des interfaces selon la taille de l’écran. Mais elles posent une limite : elles ne tiennent pas compte du contexte local d’un composant.

Les container queries sont une approche plus moderne, surtout utile dans un monde dominé par les composants, le design system et les architectures modulaires.

Outre ce gain de granularité dans l’implémentation du style CSS de nos pages web, les container queries sont idéales pour éviter l’apparition de “cascades responsive” imprévisibles.

Comment les container queries empêchent les cascades CSS imprévisibles ?

Avec les media queries, un composant change de style selon la taille de l’écran, pas selon l’espace réel qu’il occupe.

Du coup, si vous faites apparaître dans votre layout :

Une sidebar
Un mode « split view » (2 colonnes)
Etc.

Alors le composant peut se croire en “desktop” alors qu’il est en réalité à l’étroit. Résultat : le layout casse.

Avec les container queries, le style dépend directement de la taille du conteneur, donc le composant s’adapte à ce qu’il a vraiment sous la main. Fini les surprises quand le layout change ! ✨

En bref, écrire des container queries permet de gagner en :

🧩 Modularité : chaque composant devient autonome
🔄️ Réutilisabilité : pas de style global à triturer
🛠️ Maintenabilité : logique plus locale, moins de dépendances

Ecrire des Container Queries

Définir un conteneur

Pour déclarer un container query, il faut d’abord déclarer… un conteneur !

Cela se fait via les propriétés CSS container-type et container-name :

copié !

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

container-name : on nomme le conteneur.
container-type: inline-size : on observe la largeur du conteneur

Déclarer une Container Query

Règle `@container`

Les container queries sont définies à l’intérieur d’une règle @container à appliquer sur un composant.

Le nom du conteneur en question correspont à l’attribut container-name :

@container nom-conteneur...

Ensuite, il faut définir au-dessus ou en-dessous de quel point de rupture le style du composant devra changer.

Points de rupture (breakpoints)

Pour les media queries, on utilise des breakpoints basés sur la largeur de l’écran. Pour les container queries, c’est similaire, mais les breakpoints sont basés sur la largeur du composant, comme spécifié avec container-type: inline-size.

La syntaxe est la même que pour les media queries : on indique la valeur du breakpoint et le type de limite (inférieur, compris entre ou supérieur).

copié !

#products-container {
  container-name: products-container;
  container-type: inline-size;
}

#products-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@container products-container (width > 600px) {
  #products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container products-container (width > 900px) {
  #products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@container products-container (width > 1200px) {
  #products-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

De nouvelles unités pour les conteneurs

Avec les container queries, plusieurs nouvelles unités de mesure CSS sont introduites pour faciliter la création de designs réactifs basés sur la taille du conteneur plutôt que sur la taille de la fenêtre.

Voici les 2 principales unités de conteneur :

Unité	Description
`cqw`	1% de la largeur du conteneur
`cqh`	1% de la hauteur du conteneur

Media Queries VS Container Queries

Voici un tableau comparatif mettant en lumière les avantages et inconvénients des container queries VS les media queries :

Caractéristique	Media Queries	Container Queries
Base de mesure / Utilisation	Taille du viewport (fenêtre du navigateur)	Taille du conteneur
Granularité	Globale (s’applique à toute la page)	Locale (s’applique à un composant spécifique)
Modularité	Moins modulaire, dépend de la taille de l’écran	Plus modulaire, chaque composant peut s’adapter indépendamment
Réutilisabilité	Moins réutilisable, nécessite des ajustements globaux	Plus réutilisable, les styles sont encapsulés dans les composants
Maintenabilité	Peut être moins maintenable en raison des dépendances globales	Plus maintenable en raison de la logique locale et des dépendances réduites

🤔 Les container queries remplacent-ils les Media Queries ?

Les container queries ne remplacent pas les Media Queries, mais ils les complètent.

Les Media Queries restent essentielles pour les adaptations globales basées sur la taille de l’écran, tandis que les container queries offrent une approche plus granulaire et modulaire pour adapter les composants individuels en fonction de leur contexte local.

Les container queries représentent une avancée significative dans le domaine du design responsive. Ils permettent une adaptation plus précise et modulaire des composants que les media queries. En adoptant les container queries, les développeurs peuvent créer des interfaces plus flexibles, réutilisables et maintenables.

Newsletter