Résumé

  • Le premier projet public de Cascade Level 6, en décembre 2021, proposait @scope et la proximité de la racine. Il ajoutait encore la spécificité du sélecteur de départ aux règles placées à l’intérieur.
  • Les versions de 2023 et 2024 ont séparé la frontière du poids des règles : la racine délimite leur champ, son sélecteur n’alourdit plus automatiquement leur spécificité et la proximité joue son rôle propre.

Dans notre petite architecture de cartes, un auteur pourrait écrire un long sélecteur énumérant tous les ancêtres du bouton corail. Cela fonctionne jusqu’au jour où la carte déménage. Les outils de composants ont aussi une méthode plus administrative : attribuer une marque à chaque élément du périmètre et la répéter dans les sélecteurs. Le bouton est protégé, mais la plante verte du bureau porte désormais elle aussi un badge. Une frontière que le navigateur comprend directement épargne cette distribution générale de cartes d’identité.

Le premier projet public du W3C, daté du 21 décembre 2021, montrait justement les attributs data-scope répétés sur les descendants. @scope offrait une autre voie : nommer une racine, éventuellement une limite inférieure, et écrire les règles ordinaires dans le bloc. Le document explorait également la distance entre la racine d’une règle et l’élément visé. Le navigateur peut compter les étapes dans l’arbre plutôt que laisser chaque équipe traduire cette distance en longueur de sélecteur.

La clôture de 2021 distribuait néanmoins des médailles. Le sélecteur de la racine ajoutait sa spécificité à celle des règles intérieures. Avec @scope (#hero), un simple img héritait du poids de l’identifiant. La frontière indiquait un lieu et gonflait en même temps le rang de tout ce qui s’y trouvait. Le texte examinait encore la force à donner à la proximité dans la cascade. Lire une version ancienne oblige donc à regarder les calculs de son époque, pas seulement une syntaxe qui nous paraît familière.

Le projet du 21 mars 2023 a remis chaque chose à sa place. Son exemple donne la même spécificité, (0,0,1), à @scope (#hero) { img { ... } } et à :where(#hero) img { ... }. #hero établit le début du périmètre; img compte pour le classement. La racine ne prête plus automatiquement sa force aux déclarations qu’elle héberge. Une adresse précise peut ainsi servir de limite sans devenir une consigne de priorité pour toutes les pièces de la maison.

La forme to (...) fixe aussi un seuil où le périmètre s’arrête. La règle de la grande carte peut peindre chez elle et s’arrêter devant la petite carte. Lorsque plusieurs périmètres se chevauchent, la distance de la racine à l’élément devient un critère à la place prévue par la cascade. On la mesure en générations dans l’arbre des éléments, sans regarder la taille visuelle de la carte. La proximité donne une réponse commune à un conflit local; elle ne délivre pas un passe-droit sur les autres critères de priorité.

Le projet du 6 septembre 2024 précise que les éléments qui constituent la limite inférieure restent hors du périmètre, et que la proximité est une seule mesure entre une racine et l’élément concerné. Son historique indique l’abandon de la proximité « forte » et du supplément de spécificité donné autrefois par la racine. Il trace aussi une limite à l’idée de limite : @keyframes, @font-face et @layer continuent de définir des noms utilisables globalement même s’ils sont écrits dans @scope; les règles de style contenues peuvent, elles, être bornées.

La chronologie du W3C situe les projets de 2021, 2023 et 2024, et la note du groupe de travail CSS présente @scope comme le nouveau travail de ce niveau. Le résultat n’est pas simplement une clôture. C’est une clôture dont on a retiré l’autorité superflue, puis mesuré proprement les distances. La grande carte garde ses boutons bleus; la petite choisit le corail sans épingler un badge à chacun de ses descendants.