Quelles fonctionnalités CSS modernes ont vraiment changé votre façon de construire des composants, et quel problème les container queries résolvent-elles ?

Les container queries permettent à un composant de répondre à la largeur de son conteneur au lieu de celle de la fenêtre, donc la même carte peut être étroite dans une barre latérale et large dans une colonne principale sans faire circuler des props ni deviner des points de rupture. À côté, le sélecteur has permet de styler le parent, l'imbrication native supprime la dépendance à un préprocesseur, subgrid aligne du contenu imbriqué à travers une grille, et les view transitions animent les changements d'état sans bibliothèque.

La grosse, ce sont les container queries, parce que pendant des années la mise en page d'un composant était liée à la fenêtre alors que le composant n'a aucune idée de la largeur de son emplacement. Donc la même carte avait une prop du genre variant compact, et cette prop devait être transmise depuis l'endroit où elle était placée. Maintenant je déclare container type inline size sur l'enveloppe et la carte se style à partir de sa propre largeur, ce qui fait qu'elle tombe dans une barre latérale ou une grille pleine largeur et fonctionne, point. Ensuite le sélecteur has, surtout pour les états de formulaire, parce que je peux styler l'enveloppe d'un champ selon qu'elle contient une saisie invalide sans toucher au JavaScript. L'imbrication native m'a vraiment enlevé une dépendance à un préprocesseur, et subgrid fait enfin s'aligner les en-têtes de cartes sur une rangée. Sur le support, je regarde le statut baseline plutôt que de deviner, et si une fonctionnalité n'est pas largement disponible je l'utilise en amélioration progressive avec un bloc supports pour que rien ne paraisse cassé sans elle.