Mise en Page Moderne avec les CSS Container Queries

Les container queries CSS représentent l'une des capacités de mise en page les plus significatives ajoutées à la plateforme web ces dernières années. Contrairement aux media queries, qui répondent aux dimensions du viewport, les container queries permettent aux composants de s'adapter selon la taille de leur conteneur parent. Ce passage de la réactivité au niveau de la page au niveau du composant résout un problème de longue date dans les design systems : construire des composants véritablement réutilisables qui s'affichent correctement dans tout contexte sans surcharges globales de breakpoints.

Container queries vs media queries

Les media queries ont révolutionné le design responsive en permettant aux styles de changer selon la largeur du viewport. Mais la largeur du viewport est un mauvais proxy pour l'espace disponible à un composant individuel. Un widget de sidebar, une carte de tableau de bord et une section hero pleine largeur existent tous à des largeurs différentes même lorsque le viewport est identique.

Ce décalage force les développeurs vers des contournements maladroits :

• Passer des props de breakpoint des composants parents pour surcharger les styles enfants.
• Utiliser des resize observers JavaScript pour basculer les classes selon la largeur de l'élément.
• Créer des variantes de composants dupliquées pour différents contextes de mise en page.
• S'appuyer sur des astuces CSS grid et flexbox qui cassent lorsque la mise en page change.

Les container queries éliminent ces contournements. Un composant enveloppé dans un contexte de conteneur ajuste automatiquement sa mise en page interne lorsque son espace alloué change — que ce soit dû au redimensionnement du viewport, au basculement de sidebar ou au reflow des colonnes de grille.

La règle @container

Les container queries utilisent deux constructions CSS : la propriété container-type sur un élément parent et l'at-rule @container sur les styles descendants. Le parent se déclare comme conteneur de requête, et les enfants écrivent des styles conditionnels basés sur les dimensions du conteneur.

/* Parent establishes a query container */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* Each card container enables size queries for its children */
.product-card {
  container-type: inline-size;
  container-name: card;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Child styles respond to container width, not viewport */
@container card (min-width: 400px) {
  .product-card .card-body {
    display: flex;
    gap: 1rem;
  }

  .product-card .card-image {
    width: 40%;
    flex-shrink: 0;
  }

  .product-card .card-details {
    flex: 1;
  }
}

@container card (max-width: 399px) {
  .product-card .card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

La propriété container-type accepte inline-size (largeur en modes d'écriture horizontaux), size (largeur et hauteur), ou normal (pas de conteneur). La plupart des cas d'usage de mise en page n'exigent que inline-size, qui est aussi l'option la plus performante car le navigateur ne suit qu'une dimension.

Unités de container query

Les container queries ont introduit de nouvelles unités de longueur CSS qui référencent les dimensions du conteneur de requête plutôt que le viewport. Ces unités permettent une typographie et un espacement fluides qui s'adaptent à la taille du composant.

• cqw — 1 % de la largeur du conteneur de requête.
• cqh — 1 % de la hauteur du conteneur de requête.
• cqi — 1 % de la taille inline du conteneur de requête.
• cqb — 1 % de la taille block du conteneur de requête.
• cqmin — Le plus petit de cqi et cqb.
• cqmax — Le plus grand de cqi et cqb.

.stat-widget {
  container-type: inline-size;
}

.stat-widget .value {
  /* Font size scales with container width */
  font-size: clamp(1.5rem, 5cqi, 3rem);
}

.stat-widget .label {
  font-size: clamp(0.75rem, 2.5cqi, 1rem);
}

Combinez les unités de container query avec clamp() pour créer une typographie qui s'adapte fluidement dans un composant sans sauts de breakpoint durs. Un widget de statistiques dans une colonne de sidebar étroite affiche un texte plus petit, tandis que le même composant dans un panneau de tableau de bord large affiche un texte plus grand — automatiquement, sans props ni JavaScript.

Style queries et fonctionnalités des container queries

Au-delà des requêtes de taille, la spécification CSS container queries inclut les style queries qui répondent aux valeurs de style calculées du conteneur. Vous pouvez interroger les valeurs de propriétés personnalisées, donnant aux composants une conscience du contexte de thème de leur parent.

.theme-container {
  container-type: inline-size;
  --variant: default;
}

.theme-container[data-variant="compact"] {
  --variant: compact;
}

@container style(--variant: compact) {
  .nested-component {
    padding: 0.5rem;
    font-size: 0.875rem;
  }
}

Les style queries sont particulièrement puissantes dans les design systems où un conteneur définit des tokens sémantiques et les composants enfants adaptent leur densité, espacement et typographie en conséquence. Ce modèle remplace le prop-drilling de flags de variante à travers les arbres de composants.

Construire des composants responsive sans media queries

L'objectif pratique des container queries est des composants qui fonctionnent correctement partout où ils sont placés. Considérez un composant de tableau de données utilisé en vue pleine page, dans une boîte de dialogue modale et dans un widget de tableau de bord. Avec les media queries seules, les trois instances partagent la même logique de breakpoint liée à la largeur du viewport, produisant des mises en page cassées dans au moins un contexte.

Avec les container queries, le composant tableau définit son propre comportement responsive :

• Au-dessus de 600px de largeur de conteneur — Afficher toutes les colonnes en mise en page tableau standard.
• 400px à 600px — Masquer les colonnes de faible priorité, réduire le padding.
• En dessous de 400px — Passer à une mise en page en cartes empilées avec paires label-valeur.

.data-table-wrapper {
  container-type: inline-size;
  container-name: table;
  overflow-x: auto;
}

@container table (max-width: 399px) {
  .data-table thead {
    display: none;
  }

  .data-table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
  }

  .data-table td {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
  }

  .data-table td::before {
    content: attr(data-label);
    font-weight: 600;
  }
}

Ce composant ne nécessite aucune connaissance de la mise en page de son parent. Déposez-le dans n'importe quel conteneur et il s'adapte. C'est la promesse des container queries tenue.

Intégration avec les frameworks

Les frameworks CSS modernes embrassent les container queries nativement. Tailwind CSS v4 inclut des variantes de container query — préfixez les utilitaires avec @ suivi du breakpoint pour appliquer des styles selon la taille du conteneur. Styled-components et autres bibliothèques CSS-in-JS supportent l'at-rule @container dans les template literals sans configuration supplémentaire.

Dans les bibliothèques de composants React, établissez le contexte de conteneur à la racine du composant et laissez les éléments internes utiliser les container queries pour les décisions de mise en page. Documentez quels composants sont container-aware pour que les consommateurs sachent éviter de les contraindre en dessous de leur largeur fonctionnelle minimale.

Support navigateur et amélioration progressive

Les container queries bénéficient d'un large support navigateur en 2026, avec une couverture sur Chrome, Firefox, Safari et Edge. Pour le petit pourcentage de navigateurs legacy sans support, appliquez l'amélioration progressive : concevez les styles par défaut pour la taille de conteneur la plus courante, puis ajoutez les surcharges de container query pour les navigateurs supportés.

Utilisez la règle @supports pour détecter le support des container queries et fournir des fallbacks media query si nécessaire :

/* Fallback for browsers without container query support */
@media (max-width: 600px) {
  .product-card .card-body {
    flex-direction: column;
  }
}

/* Enhanced layout for supporting browsers */
@supports (container-type: inline-size) {
  @container card (max-width: 399px) {
    .product-card .card-body {
      flex-direction: column;
    }
  }
}

Les container queries marquent une maturation du CSS en tant que langage pour le design orienté composants. En déplaçant la logique responsive du niveau page au niveau composant, elles permettent des design systems où chaque composant est véritablement autonome, adaptatif et réutilisable. Adoptez les container queries dans votre prochain projet et expérimentez le design responsive comme il était toujours censé fonctionner.