Container Queries

Définition

Adaptent le style d'un composant à la taille de son conteneur plutôt qu'au viewport, via container-type: inline-size et @container. Les requêtes de taille sont Baseline « Widely available » (disponibles partout depuis février 2023). Les requêtes de style style() et scroll-state() sont plus récentes et à support variable.

Analogie

Comme un meuble modulable qui change de forme selon la taille de la pièce où il est placé, pas de la maison entière.

Exemple de code

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

@container (width >= 400px) {
  .card { display: flex; gap: 1rem; }
}
/* unités relatives au conteneur */
.card h2 { font-size: max(1.2rem, 1rem + 2cqi); }

Cas d'usage

Rendre un composant vraiment réutilisable en l'adaptant à son contexte local, pas au viewport global.

Anti-pattern

Termes liés

Sources

• developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@container