Les requêtes des médias demandent : quelle est la largeur de l’écran ? Les requêtes de conteneur demandent : quelle est la largeur de ce composant ? Cette différence décide de l'emplacement des points d'arrêt, et bien faire les choses est ce qui rend un composant réutilisable ailleurs. Aujourd'hui, quatre-vingt-quinze virgule huit pour cent des navigateurs prennent en charge les requêtes de conteneurs.

Utiliser des requêtes multimédias pour le plan de page

  • Une disposition à trois colonnes réduite à une seule colonne sur les téléphones.
  • La différence entre l'en-tête fixe et un document à flux normal sur petits écrans.
  • Tout ce qu'un visiteur décrirait comme « la page entière » par vue.

Utiliser des requêtes de conteneur pour les pièces

.card-wrap { container-type: inline-size; }
@container (min-width: 480px) {
  .card { display: grid; grid-template-columns: 140px 1fr; }
}

La carte connaît désormais ses propres règles de mise en page. Déposez-le dans une barre latérale et il s'empile, déposez-le sur la page d'accueil et il se divise en deux colonnes. Aucune requête média au monde ne peut faire cela, car la requête média ne sait pas où la carte va atterrir.

3. Comment convertir les erreurs classiques de point d’arrêt :

  1. N'écrivez jamais @media (max-width: 480px) pour corriger un seul widget.
  2. Déclarez le type de conteneur sur le wrapper. Sans cela, la requête du conteneur ne correspond à rien, une erreur qui est également invisible.
  3. Testez dans une fenêtre redimensionnable, pas seulement celles des outils de développement.
Un composant dont le style dépend de son conteneur est enfin véritablement portable. C'est très gentil.

Règle de migration : touchez la page, ajustez une requête multimédia. Touchez un composant, attrapez un conteneur. Les deux fonctionnent dans le même fichier et aucun ne remplace l’autre.