Container queries et CSS nesting

Rendez vos composants responsives par rapport à leur conteneur plutôt qu'au viewport, et structurez vos feuilles avec le nesting natif.

10 min · 3 questions

Les media queries mesurent le viewport : une carte affichée à la fois dans une sidebar étroite et dans une grille principale ne peut pas s'adapter correctement avec elles, car la même largeur d'écran correspond à deux contextes différents. Les container queries résolvent ce découplage : le composant interroge la taille de son conteneur. Prérequis : désigner explicitement un conteneur avec container-type (inline-size pour ne mesurer que l'axe horizontal, le cas courant), éventuellement nommé via container-name.

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

@container sidebar (min-width: 400px) {
  .widget {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 12px;
  }
}

Les unités de conteneur complètent le dispositif : 1cqi vaut 1 % de la taille inline du conteneur interrogé (cqw, cqh, cqb, cqmin, cqmax existent aussi). Combinées à clamp(), elles produisent une typographie fluide par composant : la même carte a un titre proportionné à sa colonne, où qu'elle soit posée.

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

.card h2 {
  font-size: clamp(1rem, 5cqi, 1.75rem);
}

@container (max-width: 300px) {
  .card .meta {
    display: none;
  }
}

Le nesting natif apporte enfin l'imbrication sans préprocesseur. Le sélecteur & référence le contexte parent ; les media queries et @container s'imbriquent directement dans une règle. Différence cruciale avec Sass : le parent imbriqué est traité comme enveloppé dans :is(). Deux conséquences : la spécificité du parent est celle du plus fort de ses sélecteurs si c'est une liste, et & .child ne fait pas de concaténation de chaînes - le pattern Sass &__element pour générer des noms BEM n'existe pas en natif.

.menu {
  display: flex;
  gap: 8px;

  & > li {
    list-style: none;

    &:hover {
      background: #f3f4f6;
    }
  }

  @media (min-width: 768px) {
    gap: 16px;
  }
}

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Pourquoi une container query est-elle préférable à une media query pour une carte réutilisable ?
   • Elle est plus rapide à évaluer pour le moteur de rendu
   • Elle réagit à la taille du conteneur de la carte, identique quel que soit l'écran où la colonne est étroite
   • Elle fonctionne sans déclarer le moindre prérequis CSS
   • Elle permet d'interroger la hauteur du viewport en plus de la largeur
2. À quoi correspond 5cqi ?
   • 5 % de la largeur du viewport
   • 5 % de la taille inline du conteneur interrogé
   • 5 fois la taille de police du conteneur
3. Quelle différence le nesting natif présente-t-il avec le nesting Sass ?
   • Le natif interdit d'imbriquer des media queries dans une règle
   • Le natif traite le parent comme enveloppé dans :is() et ne permet pas la concaténation type &__element
   • Le natif exige un préprocesseur pour compiler le symbole &
   • Le natif limite l'imbrication à un seul niveau