@scope - Directive CSS
Résumé des caractéristiques de la directive @scope
Description de la directive @scope.
La directive @scope limite la portée des sélecteurs qu'il renferme. Tout se passe comme si @scope permettait d'appliquer des styles
à une partie seulement du document.
Exemple. Imaginons le code HTML et le code CSS suivants. On retrouve deux directives @scope ciblant chacune une des sections.
Chacune des sections contient un titre h2 et un paragraphe p. Avec le CSS indiqué, seul le premier titre h2 passera en rouge.
Le deuxième titre passera lui en vert.
<section id="section1">
<h3>Titre de la section 1.</h3>
<p>Texte de la section 1.</p>
</section>
<section id="section2">
<h3>Titre de la section2.</h3>
<p>Texte de la section 2.</p>
</section>
@scope (#section2) {
h3 {color:green;}
}
@scope (#section1) {
h3 {color:red;}
p {color:red;}
}
Titre de la section 1.
Texte de la section 1.
Titre de la section 2.
Texte de la section 2.
Si vous écrivez des composants, la directive @scope vous permet de les styler sans écrire l'identifiant de votre composant dans chacune de vos règles,
et sans que les styles risquent de perturber le reste de la page.
@scope a plusieurs effets :
- Les sélecteurs à l'intérieur d'une directive
@scopesont limitées à cette portée. - Le sélecteur
:scopefait référence aux éléments ciblés par@scope. - Les règles de priorité sont changées.
Sélecteurs spéciaux.
Le sélecteur :scope cible la racine définie par @scope. Par exemple, dans une directive @scope (#id) le sélecteur
:scope cible l'élément dont l'identifiant est id. Il est nécessaire pour appliquer des styles à cet élément.
Dans le cas de directives @scope imbriquée, @scope faire référence à la dernière rencontrée. Par exemple, ci-dessous :scope
fait référence aux éléments de la classe edito.
@scope (#id1) {
@scope(.edito) {/
:scope { ... }
}
}
Il existe également un sélecteur & qui représente le sélecteur de la racine. La différence entre & et :scope
est dans la spécificité (priorité) de chacun de ces sélecteurs. D'autre part, le sélecteur & fonctionne également en dehors d'une
directive @scope. Alors que le sélecteur :scope, utilisé en dehors d'une directive @scope, est équivalent à :root.
Il est possible d'écrire par exemple :
#section3 {
color:red;
& h3 {
text-decoration:underline;
}
}
Spécificité des sélecteurs, règles de priorités.
Le sélecteur :scope a une spécificité de 10, de même que toutes les pseudo-classes, quelque soit la spécificité du sélecteur racine (spécifié par
@scope).
Tandis que le sélecteur & à la même spécificité que le sélecteur racine. Les deux exemples ci-dessous illustrent cette différence.
Titre de la section 5.
Texte de la section 5.
Titre de la section 6.
Texte de la section 6.
Reportez-vous au sélecteur :scope ou au sélecteur & pour davantage de précisions sur ces sélecteurs.
Vous pouvez aussi, en cas de besoin, consulter la page sur Les priorités.
Syntaxes de la directive @scope.
- @scope: ( <selector> ) { ... }
Avec un seul paramètre, la directive
@scopelimite la portée à la portion du document correspondant à sélecteur. - @scope: ( <selector1> ) to ( <selector2> ) { ⚠ ... }
Avec deux paramètres, la directive
@scopelimite la portée à tous les sélecteurs compris entre selector1 inclus et selector2 exclus. -
Module CSS - Cascade et héritage - Niveau 6
Introduction de la directive@scope, de la pseudo-classe:scopeet du sélecteur&.
21 Décembre 2021Document de travail.
Compatibilité des navigateurs avec la directive @scope.
@scope qui limite la portée des règles qu'il contient.@scopeNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Opéra
Safari
Safari sur IOS
Samsung Internet
Chrome
Firefox
Edge
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
KaiOS Browser
Opéra mini
Évolution de la directive @scope.
Voir aussi, au sujet de la cascade.
Le module de spécification CSS Cascading and Inheritance regroupe toutes les notions générales de CSS : l'héritage, les couches de styles, etc.
Il contient également la définition pour @scope.