@scope

Définition

Règle @scope qui limite la portée des styles à un sous-arbre DOM, avec une borne haute (racine) et optionnellement une borne basse (limite). Elle ajoute un critère de cascade, la proximité de portée. Baseline « Newly available » depuis mars 2026.

Analogie

Comme une clôture de jardin avec une zone interdite au fond : les règles s'appliquent dans l'espace délimité.

Exemple de code

@scope (.card) to (.card-footer) {
  p { color: navy; }
  a { text-decoration: underline; }
}
/* Les <p> dans .card-footer ne sont pas affectés */

Cas d'usage

Isoler les styles d'un composant sans Shadow DOM ni convention de nommage comme BEM.

Termes liés

Sources

• developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@scope