Guide complet des Container Queries CSS : fini les limites des media queries

Guide complet des Container Queries CSS : fini les limites des media queries

Pendant des années, le design responsive s'est appuyé sur les media queries pour adapter les layouts aux différentes tailles d'écran. Mais que faire quand un composant doit réagir à la taille de son conteneur, pas du viewport ? C'est là qu'arrivent les Container Queries CSS — une fonctionnalité qui change la donne et qui redéfinit le design responsive en 2025.

Pourquoi on avait besoin des Container Queries

Imaginez : vous avez créé un beau composant carte qui rend parfaitement sur desktop. Il a une image à gauche, du contenu à droite, tout est bien équilibré. Maintenant vous devez utiliser ce même composant dans une sidebar étroite. Avec les media queries, vous êtes coincé — le composant ne connaît que la largeur du viewport, pas l'espace réellement disponible.

/* L'ancienne méthode avec les media queries — problématique */
@media (min-width: 768px) {
  .card {
    display: flex;
  }
}
/* Mais si cette carte est dans une sidebar de 300px sur un écran de 1920px ? */

Cette limite a embêté les développeurs pendant des années, menant à des composants dupliqués, des conventions de nommage complexes et des cauchemars de maintenance. Les container queries règlent ça élégamment en permettant aux composants de réagir à la taille de leur conteneur.

Comprendre les Container Queries : les bases

Qu'est-ce que c'est exactement ?

Les container queries permettent aux éléments d'adapter leurs styles selon la taille de leur élément parent plutôt que du viewport. Un composant peut donc être vraiment autonome et responsive, peu importe où il est placé dans votre layout.

Différences clés avec les media queries :

• Media Queries : Réagissent aux caractéristiques du viewport/appareil
• Container Queries : Réagissent aux dimensions du conteneur parent
• Portée : Les media queries sont globales, les container queries sont limitées à des conteneurs précis

Support navigateur en 2025

Bonne nouvelle ! En 2025, les container queries ont un très bon support :

Avec plus de 90 % des utilisateurs sur des navigateurs compatibles, les container queries sont prêtes pour la production.

Syntaxe de base

/* Étape 1 : Définir un conteneur */
.card-wrapper {
  container-type: inline-size;
  /* ou */
  container: card / inline-size; /* avec un nom */
}

/* Étape 2 : Interroger le conteneur */
@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 1rem;
  }
}

/* Ou interroger un conteneur nommé */
@container card (min-width: 400px) {
  .card-title {
    font-size: 2rem;
  }
}

Exemples concrets

Exemple 1 : Composant carte adaptatif

Créons une carte qui s'adapte intelligemment à l'espace disponible :

.card-container {
  container-type: inline-size;
  width: 100%;
}

.card {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Conteneur étroit : empiler verticalement */
@container (width < 400px) {
  .card {
    display: flex;
    flex-direction: column;
  }
  
  .card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  
  .card-title {
    font-size: 1.25rem;
  }
}

/* Conteneur moyen : côte à côte avec petite image */
@container (400px <= width < 600px) {
  .card {
    display: flex;
    gap: 1rem;
  }
  
  .card-image {
    width: 120px;
    height: 120px;
    object-fit: cover;
    flex-shrink: 0;
  }
  
  .card-title {
    font-size: 1.5rem;
  }
}

/* Grand conteneur : layout spacieux */
@container (width >= 600px) {
  .card {
    display: flex;
    gap: 2rem;
  }
  
  .card-image {
    width: 200px;
    height: 150px;
    object-fit: cover;
    flex-shrink: 0;
  }
  
  .card-title {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
  }
  
  .card-description {
    font-size: 1.1rem;
    line-height: 1.6;
  }
}

Exemple 2 : Menu de navigation responsive

Les container queries sont parfaites pour les composants de navigation qui s'adaptent à l'espace disponible :

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

.nav-menu {
  display: flex;
  gap: 1rem;
  padding: 1rem;
}

/* Menu style mobile dans les conteneurs étroits */
@container (width < 500px) {
  .nav-menu {
    flex-direction: column;
  }
  
  .nav-item {
    padding: 0.75rem;
    border-bottom: 1px solid #eee;
  }
}

/* Menu horizontal dans les conteneurs larges */
@container (width >= 500px) {
  .nav-menu {
    flex-direction: row;
    justify-content: space-between;
  }
  
  .nav-item {
    position: relative;
    padding: 0.5rem 1rem;
  }
}

Exemple 3 : Grilles dynamiques

Créez des grilles qui s'ajustent selon la largeur du conteneur, pas du viewport :

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

.product-grid {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

@container (width < 400px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

@container (400px <= width < 800px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container (width >= 800px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

Techniques avancées et unités de conteneur

Unités de Container Query

Les container queries introduisent de nouvelles unités CSS relatives aux dimensions du conteneur :

• cqw : 1 % de la largeur du conteneur
• cqh : 1 % de la hauteur du conteneur
• cqi : 1 % de la taille inline du conteneur
• cqb : 1 % de la taille block du conteneur
• cqmin : La plus petite valeur entre cqi et cqb
• cqmax : La plus grande valeur entre cqi et cqb

.responsive-text {
  container-type: inline-size;
}

.responsive-text h2 {
  font-size: clamp(1.5rem, 5cqi, 3rem);
  padding: 2cqi 4cqi;
}

.responsive-text p {
  font-size: clamp(0.875rem, 2cqi, 1.125rem);
  line-height: 1.6;
  margin-bottom: 3cqb;
}

Combiner Container Queries et Media Queries

Pour la meilleure expérience responsive, combinez les deux approches :

.article-layout {
  container-type: inline-size;
}

.article-content {
  padding: 1rem;
}

/* Media query pour les changements de layout majeurs */
@media (min-width: 1024px) {
  .article-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
  }
}

/* Ajustements fins selon la taille réelle du conteneur */
@container (min-width: 600px) {
  .article-content {
    padding: 2rem;
    font-size: 1.125rem;
  }
}

@container (min-width: 800px) {
  .article-content {
    padding: 3rem;
    max-width: 65ch;
    margin: 0 auto;
  }
}

Tester les Container Queries

Pour bien tester vos container queries, vous avez besoin des bons outils. Notre Testeur de design responsive est parfait pour ça :

1. Testez différentes tailles de conteneur : Utilisez le redimensionnement pour voir comment vos composants réagissent
2. Presets d'appareils : Vérifiez le comportement des conteneurs dans différents viewports
3. Mises à jour en temps réel : Regardez vos container queries se déclencher pendant le redimensionnement

Pour calculer les breakpoints optimaux selon votre contenu, notre Calculateur de ratio d'aspect aide à déterminer les meilleures dimensions de conteneur.

Considérations de performance

Bonnes pratiques

1. Évitez l'imbrication profonde

/* À éviter */
.container1 { container-type: inline-size; }
  .container2 { container-type: inline-size; }
    .container3 { container-type: inline-size; }

/* Mieux */
.component-container { container-type: inline-size; }

2. Utilisez le containment avec parcimonie

/* Ne mettez container-type que là où c'est nécessaire */
.card-wrapper {
  container-type: inline-size; /* Seulement sur le parent direct */
}

3. Optimisez les conditions de requête

/* Combinaisons logiques efficaces */
@container (400px <= width < 800px) {
  /* Styles pour conteneurs moyens */
}

Stratégie de migration : des media queries aux container queries

Étape 1 : Auditez vos styles actuels

Identifiez les composants qui gagneraient à utiliser les container queries : cartes, menus de navigation, sidebars, tableaux de données, formulaires, galeries d'images.

Étape 2 : Amélioration progressive

/* Styles de base qui marchent partout */
.card {
  padding: 1rem;
  background: white;
}

/* Fallback avec media queries */
@media (min-width: 768px) {
  @supports not (container-type: inline-size) {
    .card {
      display: flex;
    }
  }
}

/* Container queries modernes */
@supports (container-type: inline-size) {
  .card-wrapper {
    container-type: inline-size;
  }
  
  @container (min-width: 400px) {
    .card {
      display: flex;
    }
  }
}

Étape 3 : Test et validation

Utilisez la détection de fonctionnalités pour vérifier la compatibilité :

function supportsContainerQueries() {
  try {
    document.body.style.containerType = 'inline-size';
    return document.body.style.containerType === 'inline-size';
  } catch (e) {
    return false;
  }
}

if (supportsContainerQueries()) {
  document.body.classList.add('container-queries-supported');
}

Pièges courants

Piège 1 : Oublier de définir le container-type

/* Ne marchera pas — pas de container-type défini */
@container (min-width: 400px) {
  .card { display: flex; }
}

/* Corrigé */
.card-wrapper {
  container-type: inline-size;
}
@container (min-width: 400px) {
  .card { display: flex; }
}

Piège 2 : container-type sur le mauvais élément

/* Faux — container-type sur l'élément stylé */
.card {
  container-type: inline-size;
}

/* Juste — container-type sur le parent */
.card-wrapper {
  container-type: inline-size;
}
@container (min-width: 400px) {
  .card { /* Ça marche */ }
}

Piège 3 : Noms de conteneur en conflit

/* Utilisez des noms uniques */
.outer {
  container: outer-layout / inline-size;
}
.inner {
  container: inner-layout / inline-size;
}

Conclusion

Les container queries représentent un changement de fond dans notre approche du design responsive. Elles permettent de créer des composants vraiment modulaires et conscients de leur contexte, qui s'adaptent intelligemment à leur environnement. Les media queries gardent leur place pour les décisions au niveau du viewport, mais les container queries gèrent la réactivité au niveau des composants — ce qu'on a toujours voulu.

Points clés :

• Les container queries rendent les composants vraiment réutilisables et conscients de leur contexte
• Le support navigateur est maintenant suffisant pour la production (90 %+ de couverture)
• L'impact sur les performances est minimal quand on les utilise correctement
• La migration peut se faire progressivement avec des fallbacks
• Les futures fonctionnalités les rendront encore plus puissantes

Prochaines étapes :

1. Commencez à expérimenter avec les container queries dans vos nouveaux composants
2. Identifiez les composants existants qui gagneraient à migrer
3. Utilisez nos outils Screen Size Checker pour tester vos implémentations
4. Restez à jour sur les nouveautés des style queries et des unités de conteneur

L'ère des composants vraiment responsive est arrivée. Les container queries ne sont pas juste une nouvelle fonctionnalité — c'est une nouvelle façon de penser le web design. Commencez à les utiliser aujourd'hui.

Envie de tester vos container queries sur différentes tailles d'écran ? Essayez notre Testeur de design responsive gratuit pour voir comment vos composants s'adaptent en temps réel. Pour plus d'articles sur le CSS moderne et le design responsive, consultez notre blog.