La règle CSS @scope offre une solution native pour isoler finement les styles en limitant l’application des règles à un sous-arbre spécifique du DOM, ce qui évite que les styles d’un composant se propagent ailleurs tout en gardant une spécificité faible et une meilleure maintenabilité du code ; l’article montre comment cibler uniquement certains éléments comme des <h2> dans des .card, explique l’usage des pseudo-classes :scope et de l’esperluette & pour référencer la racine de portée, et souligne des avantages comme la robustesse face aux modifications du DOM par rapport à des sélecteurs classiques.
Josh W. Comeau analyse la nouvelle règle CSS @starting-style, qui permet d’utiliser des transitions pour animer l’apparition d’éléments (ex: fondu, déplacement), là où on utilisait avant des @keyframes.
Le piège :
Contrairement aux @keyframes, les styles définis dans @starting-style ne sont pas prioritaires et peuvent être écrasés par des sélecteurs plus spécifiques (ID, styles inline). Résultat : l’animation ne se déclenche pas.
Exemple :
Un bouton génère des particules avec une transition sur transform. Si la position finale est définie en JavaScript (style inline), @starting-style est ignoré.
Solutions :
- Forcer avec
!important(peu maintenable), - Utiliser des variables CSS pour égaliser la spécificité,
- Revenir aux
@keyframes, plus simples et compatibles.
Verdict :
@starting-style est pratique, mais les @keyframes restent souvent plus fiables.