Isoler finement les styles CSS à l'aide de @scope

Raphael - Alsacreations - 17/02

La gestion de la portée des styles est un défi historique en CSS. Des méthodologies comme BEM aux solutions techniques comme le Shadow DOM ou les CSS Modules, nous avons toujours cherché à éviter que le style d'un composant ne se propage sur ses voisins. L'arrivée de la règle @scope change la donne en offrant une solution native, flexible et puissante.

Présentation rapide de @scope

La règle @scope permet de cibler des éléments dans un fragment spécifique du DOM.

Dans cet exemple simple, seuls les <h2> à l'intérieur des éléments portant la classe .card seront colorés en hotpink. Les styles n'affecteront pas les autres <h2> de la page :

@scope (.card) { /* Cible les h2 uniquement dans .card */ h2 { color: hotpink; } }

Dans cet autre exemple sont ciblés uniquement les <h2> à l'intérieur des éléments portant la classe .card contenant un élément .title :

@scope (.card:has(.title)) { /* Cible les h2 uniquement dans .card qui contient .title */ h2 { color: hotpink; } }

Compatibilité navigateurs

Voici le tableau de compatibilité de @scope, que vous pouvez également consulter sur Caniuse.com :

Le sélecteur :scope et l'esperluette &

À l'intérieur d'un bloc @scope, le navigateur a besoin d'un moyen de désigner l'élément racine lui-même (celui qui porte la classe ou l'attribut de départ). Il existe deux façons de procéder :

  • :...
    [Courte citation de 8% de l'article original]