`@scope` - Directive CSS

@scope

Résumé des caractéristiques de la directive `@scope`

Description rapide

Limite la portée des instructions englobées par cette directive.

Statut

Problèmes de compatibilité ⚠

Pourcentages

Ne s'appliquent pas.

Module W3C

Module CSS - Cascade et héritage

Références (W3C)

CSS Cascading and Inheritance Level 6

Statut du document: WD (document de travail)

Description de la directive `@scope`.

La directive @scope limite la portée des sélecteurs qu'elle 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 une directive @scope ciblant le section2.


	<section class="section1">
	  <div>Section 1.</div>
	  <div>Texte de la section 1.</div>
		<section class="section2">
		  <div>Section2.</div>
		  <div>Texte de la section 2.</div>
		</section>
	</section>


	.section1 div {
	   color:red;
	}
	@scope (.section2) {
	   :scope div {
	      color:green;
	   }
	}

Et voici le résultat. Le sélecteur div de la section2 n'écrase pas celui de la section1. Il est pourtant placé après. La directive @scope limite son action aux éléments compris dans cette section.

Section 1.

Texte de la section 1.

Section 2.

Texte de la section 2.

Bien sûr le même résultat aurait été obtenu en écrivant un sélecteur plus compliqué pour la section2, quelque chose comme .section1 .section2 p mais, dans un cas réel, cela peut devenir très long. De plus ce sélecteur est très lié à l'organisation de la page. Par exemple, si vous écrivez un composant section2, la directive @scope vous permet de le styler sans que vous connaissiez le reste de la page, ni dans quel contexte le composant est intégré.

@scope a plusieurs effets :

Les sélecteurs à l'intérieur d'une directive @scope sont limitées à cette portée.
Le sélecteur :scope fait référence aux éléments ciblés par @scope.
Les règles de priorité sont changées.

Sélecteurs relatifs à `@scope`.

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ées, @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;
	   }
	}

La différence entre les deux sélecteurs réside dans leur spécificité (leur priorité). 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, qui est spécifié par @scope. Tandis que le sélecteur & à une spécificité de 0.

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.

L'exemple ci-dessous illustre la différence de spécificité entre les deux sélecteurs.
Sur la section 5, le sélecteur :scope p a une spécificité de
10 pour la classe.
1 pour le sélecteur p.
Tandis que le sélecteur sur la section 6, le sélecteur & p a
0 pour le sélecteur &.
1 pour le sélecteur p.

Ces spécificités sont à mettre en concurrence avec la règle qui suit, et qui a un sélecteur de 10+1. Les navigateurs accordent un petit avantage aux style "scopés" : à spécificités égales, ces derniers sont prioritaires :
10 pour la classe.
1 pour le sélecteur p.

Section 5.

Texte de la section 5.

Section 6.

Texte de la section 6.

Sélection par anneau (donut selection).

Il arrive qu'on l'on souhaite sélectionner une zone sauf une partie. En quelque sorte de faire un trou dans la sélection. Ces sélecteurs sous souvent dénommés "donut selectors". Pour faire cela @scope accepte éventuellement deux sélecteurs. Ce deuxième sélecteur, introduit par le mot to, indique ce qui doit être exclu de la portée de @scope. Ce qui donne cette syntaxe :


		@scope (#limits) to (#exclus) {
		   div {color:green;}
		}

A titre d'exemple, la structure de cette section ressemble à ça :


		section id="limits"
		   ├ p
		   ├ div
		   │  └ code
		   ├ p
		   ├ div
		   │  └ code
		   ├ p
		   ├ div id="exclus"
		   │  └ p
		   ├ p

Nous avons ajouté un style qui passe en vert les paragraphes de la section limits à l'exclusion de ceux qui sont inclus dans la balise avec l'identifiant exclus.

Ce texte n'est pas sélectionné par @scope car il est inclus dans une balise avec l'identifiant exclus.

Celui-ci n'est pas inclus dans la balise exclus, il est donc en vert.

Héritage.

L'isolation apportée par @scope ne concerne pas l'héritage. Même inclus dans une directive @scope les styles continuent d'hériter des styles de la section parente, même si celle-ci n'est pas visée par @scope.

div class="section7"

Section 7.

Texte de la section 7.

div class="section8"

Section 7

Texte de la section 7.

/div

Syntaxes de la directive `@scope`.

@scope: ( <selector> ) { ... }

Avec un seul paramètre, la directive @scope limite la portée à la portion du document correspondant à sélecteur.

div class="inclus"

div
Par exemple, le style ci-dessous colorie en vert toutes les balises div contenues dans la classe inclus.
/div

/div

@scope (.inclus) { div {color:green;} }
@scope: ( <selector1> ) to ( <selector2> ) { ... }

Le deuxième sélecteur, introduit par le mot to, évite que la sélection ne porte sur tout ce qui est contenu dans ce deuxième sélecteur.

div class="inclus"

Par exemple, le style ci-dessous colorie en vert toutes les balises div contenues dans la classe inclus.

div class="exclus"

Sauf celles contenues dans la classe exclus même si elles font aussi partie de la première sélection.

/div

Cette ligne est également coloriée car elle est ciblées par le sélecteur .inclus, mais pas par le sélecteur .exclus.

/div

@scope (.inclus) to (.exclus) { div {color:green;} }

Compatibilité des navigateurs avec la directive `@scope`.

Colonne 1

Reconnaissance par les navigateurs de la directive @scope qui limite la portée des règles qu'il contient.

Directive
@scope

Estimation de la prise en charge globale.

84%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Chrome

Edge

Chrome pour Androïd

Androïd Brower

Firefox pour Androïd

Opéra

Safari sur IOS

Safari

Firefox

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Évolution de la directive `@scope`.

Module CSS - Cascade et héritage - Niveau 6

Ce module de spécification introduit la notion de portée (scope), avec la directive @scope, la pseudo-classe :in(), les sélecteurs spécifiques à la portée, etc.

Concernant @scope Introduction de la directive @scope, de la pseudo-classe :scope et du sélecteur &.

21 Décembre 2021
Document de travail.

Voir aussi, au sujet de la cascade.

Le module de spécification module CSS - Cascade et héritage 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.

Propriétés :

all

Initialisation de toutes les propriétés.

Directives :

@import

Importation d'une feuille de styles, avec la possibilité de choisir une couche de cascade.

@layer

Définit les couches de cascade (layer) pour faciliter la gestion des priorités entre les règles CSS.

@scope

Limite la portée des instructions englobées par cette directive.

Valeurs:

!important

Rend une règle prioritaire sur toutes les autres.

inherit

Donne à une propriété la même valeur que celle de l'élément parent.

initial

Redonne à une propriété sa valeur initiale.

revert

Donne à une propriété la valeur définie par le navigateur.

revert-layer

Rétablit la valeur d'une propriété à la valeur qu'elle avait à la couche précédente.

unset

Donne à une propriété la valeur qu'elle aurait eu si aucun style ne l'avait changée.

@scope - Directive CSS

Résumé des caractéristiques de la directive @scope

Description de la directive @scope.

Sélecteurs relatifs à @scope.