Container Queries

Definition

Permettent d'adapter le style d'un composant en fonction de la taille de son conteneur parent plutôt que du viewport. Déclarés via container-type: inline-size et @container.

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 (min-width: 400px) {
  .card { display: flex; gap: 1rem; }
}
@container (max-width: 399px) {
  .card { display: block; }
}

Cas d'usage

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

Anti-pattern

Termes lies