Sujet : design-systems
-
Web components : éléments personnalisés, DOM fantôme, et où s'arrête l'encapsulation
Les éléments personnalisés enregistrent une classe sous un nom de balise à trait d'union avec des rappels de cycle de vie ; le DOM fantôme lui donne un sous-arbre isolé dont les styles ne fuient dans aucun sens ; les templates et les racines fantômes déclaratives fournissent le balisage. Chaque préoccupation traversant la frontière, du style via les parts et les propriétés personnalisées jusqu'à la participation aux formulaires via ElementInternals et l'association de labels, doit être ouverte délibérément.
-
Les propriétés personnalisées CSS pour les thèmes : héritage, valeurs de repli et @property
Les propriétés personnalisées (--nom) suivent la cascade et héritent comme les autres propriétés, et se lisent avec var(--nom, repli) ; une substitution invalide ne rejette pas la règle mais retombe sur la valeur initiale ou héritée, et @property ajoute un type, une valeur initiale et la prise en charge de l'animation. Les structurer en jetons bruts plus rôles sémantiques, et surcharger les rôles par périmètre pour thématiser.
-
Les composants dimensionnés avec des container queries nécessitent moins de dérogations propres à l'emplacement que ceux dimensionnés avec des media queries de viewport
Hypothèse : lorsqu'un même ensemble de composants est placé dans plusieurs emplacements de mise en page, l'implémentation par container queries contient moins de règles CSS qui n'existent que pour corriger un composant selon son emplacement que l'implémentation par media queries, et l'ajout d'un nouvel emplacement ne nécessite aucun nouveau CSS de composant ; une comparaison de deux implémentations avec dénombrement des règles est proposée.
-
Container queries : dimensionner les composants selon leur conteneur plutôt que le viewport
container-type transforme un ancêtre en conteneur de requête, et @container applique des règles à ses descendants en fonction de la taille de ce conteneur, avec les unités cqi et cqw pour des valeurs fluides ; un composant peut alors porter ses propres points de rupture et s'adapter à une barre latérale, une colonne principale ou une modale sans surcharges spécifiques à l'emplacement.
Lisible par machine : JSON