Zusammenfassung

  • Der erste öffentliche Entwurf von Cascade Level 6 im Dezember 2021 brachte @scope und die Nähe zu einer Geltungsbereichswurzel ins Spiel. Damals erhöhte der Wurzelselektor auch die Spezifität der inneren Regeln.
  • Die Entwürfe von 2023 und 2024 entkoppelten die Grenze vom Gewicht: Die Wurzel begrenzt die Anwendung, ihre Spezifität wird innen nicht automatisch addiert, und die Nähe wirkt an ihrer Stelle in der Kaskade.

Man kann den korallenroten Knopf mit einer langen Reihe von Vorfahren adressieren. Zieht die kleine Karte um, stimmt die Adresse nicht mehr. Komponentenwerkzeuge benutzen deshalb oft Stempel: Jedes Element erhält ein eindeutiges Attribut, jeder Selektor denselben Zusatz. Das hält die Farbe einigermaßen im richtigen Zimmer, aber selbst die Topfpflanze trägt nun einen Besucherausweis. Ein Browser, der den Elementbaum ohnehin kennt, könnte die Grenze auch selbst erkennen und die Markierung auf die Wurzel beschränken.

Der erste öffentliche W3C-Entwurf vom 21. Dezember 2021 zeigte dieses Beispiel mit wiederholtem data-scope und stellte @scope daneben. Autoren konnten eine Wurzel und optional eine untere Grenze angeben; im Block standen gewöhnliche Stilregeln. Außerdem untersuchte der Entwurf, ob bei konkurrierenden begrenzten Regeln die nähere Wurzel zählen sollte. Die Entfernung wäre eine Zahl von Schritten im Elementbaum. Der Selektor müsste die gesamte Wegbeschreibung nicht mehr ausschreiben.

Der damalige Zaun hatte einen Nebeneffekt. Seine Wurzel verlieh den Regeln im Inneren zusätzliche Spezifität. Bei @scope (#hero) bekam ein schlichtes img den Rang des ID-Selektors dazu. Die Adresse an der Tür wurde zum Orden für jeden Stuhl im Zimmer. Auch die Stärke der Nähe gegenüber anderen Kaskadenkriterien war noch Gegenstand der Diskussion. Wer heute einen alten Entwurf liest, muss daher dessen Rechenregeln beachten; dieselbe Syntax erzählte 2021 eine andere Geschichte als später.

Im Entwurf vom 21. März 2023 fiel der automatische Zuschlag weg. Der Text stellt @scope (#hero) { img { ... } } neben :where(#hero) img { ... } und nennt für beide die Spezifität (0,0,1). #hero bestimmt den Anfang des Geltungsbereichs, img liefert den Wert des eigentlichen Selektors. Eine präzise Türadresse macht die Regel dahinter nicht mehr von selbst mächtiger. Das hilft der kleinen Karte, ihre Gestaltung mit normalen Mitteln zu bestimmen.

Mit to (...) kann der äußere Bereich vor einem verschachtelten Teil enden. Der blaue Farbroller hält an der Schwelle. Treffen sich dennoch mehrere Bereiche auf demselben Element, kann die Nähe der jeweiligen Wurzel bei dem dafür vorgesehenen Kaskadenschritt den Ausschlag geben. Gemeint sind Generationen im Baum, keine Pixel auf dem Bildschirm. Die nahe Regel bekommt eine Stimme für ihren Ort, aber keinen Freifahrtschein gegen jede andere Priorität.

Der Entwurf vom 6. September 2024 beschreibt die Grenze genauer: Elemente, die den unteren Rand bilden, gehören nicht mehr zum Bereich. Nähe ist eine einzelne Messung von einer Wurzel zum betroffenen Element. Das Änderungsverzeichnis nennt die Entfernung der starken Nähe und, im Rückblick auf 2021, des Spezifitätszuschlags. Noch eine wichtige Einschränkung steht dort: Namensdefinierende Regeln wie @keyframes, @font-face und @layer behalten globale Bedeutung, auch wenn sie innerhalb von @scope stehen. Der Zaun begrenzt Stilregeln, er gründet keinen unabhängigen Staat für CSS-Namen.

Die W3C-Veröffentlichungsgeschichte ordnet die Fassungen von 2021, 2023 und 2024 ein; die CSS-Working-Group-Notiz von 2024 beschreibt @scope als neue Arbeit dieser Kaskadenstufe. Bemerkenswert ist die Entwicklung vom gewichtigen Zaun zur begrenzten Zuständigkeit. Außen bleiben die blauen Knöpfe blau. Innen entscheidet die kleinere Karte über Korallenrot. Dafür genügt ein Schild an der Tür.