Un panneau peut devenir étroit parce que son parent change, même si la fenêtre du navigateur ne change pas. ResizeObserver signale les modifications apportées à la zone de contenu d'un élément, afin qu'un composant réutilisable puisse réagir à son propre espace disponible.

const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    entry.target.classList.toggle(
      "is-compact",
      entry.contentRect.width < 480,
    );
  }
});

observer.observe(card);

Observez uniquement ce dont le composant a besoin

  • Créez un observateur pour les éléments associés plutôt qu'un par petit enfant.
  • Arrêtez d'observer les éléments supprimés ou déconnectez l'observateur lorsque son propriétaire est éliminé.
  • Utilisez des requêtes de conteneur CSS lorsque le changement est purement visuel et ne nécessite aucun JavaScript.

Évitez une boucle de rétroaction de redimensionnement

Changer les dimensions de l'élément observé en réponse à chaque mesure peut déclencher une autre observation. Utilisez des seuils stables et évitez de définir une taille qui oscille autour du seuil.

Testez avec le composant dans des conteneurs étroits et larges, pas seulement en redimensionnant la fenêtre complète du navigateur.