Zusammenfassung

  • Im ersten öffentlichen Entwurf von CSS Cascade Level 5 vom 19. Januar 2021 führte das W3C @layer ein. Damit konnten Autoren die Priorität ganzer Stilgruppen festlegen, bevor Selektoren innerhalb dieser Gruppen verglichen werden.
  • Der Kandidatenstandard-Schnappschuss vom 13. Januar 2022 ordnete normale Deklarationen in späteren Ebenen höher ein. Bei !important gilt die umgekehrte Reihenfolge; normale Regeln ohne explizite Ebene stehen in einer impliziten letzten Ebene.

Drei Teams wollten denselben Knopf einkleiden. Das Reset-Stylesheet hielt sich zurück, die Komponentenbibliothek lieferte die Markenfarbe, und eine lokale Korrektur sollte noch vor Feierabend auf die Seite. Der Browser wusste, wie die Kaskade eine Entscheidung trifft. Die Menschen verlängerten derweil Selektoren, bis einer gewann, und wiederholten das Spiel nach dem nächsten Import. Aus einer Gestaltungsvorgabe wurde ein Wettbewerb im Lauterwerden.

Der erste öffentliche W3C-Entwurf vom 19. Januar 2021 gab diesem Streit eine neue Geschäftsordnung. Mit @layer lassen sich Regeln zu Ebenen zusammenfassen und diese ausdrücklich sortieren. In der Ankündigung der CSS-Arbeitsgruppe liegt der Reiz gerade darin, Ebenen zu ordnen, ohne die Selektoren oder ihre Spezifität innerhalb einer Ebene umzuschreiben. Die Rangfolge hängt dann auch nicht vom glücklichen Zusammentreffen verschiedener Dateireihenfolgen ab.

Ein Autor kann Reset, gemeinsame Bibliothek, Komponenten und örtliche Anpassungen in verschiedene Ebenen setzen. Bei normalen Deklarationen gewinnt eine spätere Ebene gegenüber einer früheren, sofern die übrigen vorherigen Kriterien der Kaskade gleich sind. Erst danach kommt die Spezifität der konkurrierenden Selektoren an die Reihe. Ein komplizierter Selektor aus einer frühen Ebene kann gegen eine schlichte Klasse aus einer späteren verlieren. Wer die lokale Farbe möchte, braucht dafür keinen Turm aus IDs und Ausrufezeichen zu errichten.

Das Ausrufezeichen besitzt allerdings eine eigene Platzordnung. Bei !important gewinnen frühere Ebenen gegenüber späteren. Der W3C-Schnappschuss eines Candidate Recommendation vom 13. Januar 2022 führt beide Richtungen in der Sortierung der Kaskade auf und betrachtet die Ebene vor der Selektorspezifität. Wer den lila Knopf untersucht, muss zuerst feststellen, ob gewöhnliche oder wichtige Deklarationen gegeneinander antreten. Sonst liest er die Sitzordnung verkehrt herum.

Auch Regeln ohne Ebenennamen haben einen Platz. Im Stand von 2022 gehören sie zu einer impliziten letzten Ebene. Bei normalen Deklarationen stehen sie damit über den ausdrücklich benannten Ebenen. Der vergessene Freitagsfix außerhalb aller Ebenen kann die sorgfältig geplante Hierarchie überholen. Der Arbeitsentwurf vom 29. August 2021 dokumentiert, wie die Behandlung dieser ebenenlosen Regeln seit der ersten Fassung geändert wurde. Die Sitzordnung entstand in einer echten Diskussion, nicht auf einer Steintafel.

In derselben Augustfassung tauchte revert-layer auf. Damit kann eine Eigenschaft auf den Wert zurückfallen, den sie aus einer früheren Ebene erhalten hätte. Ebenen können ineinander liegen; importierte Stylesheets lassen sich einer Ebene zuordnen. Solche Werkzeuge machen die Absicht hinter der Rangfolge lesbar: Was setzt die gemeinsame Grundlage, was darf die Komponente bestimmen und wo hat die Seite das letzte Wort?

Die W3C-Veröffentlichungsgeschichte führt vom ersten öffentlichen Entwurf im Januar 2021 über weitere Fassungen zum Candidate Recommendation Snapshot im Januar 2022. Gerade die Änderung bei Regeln ohne Ebene und das spätere revert-layer zeigen, warum sich diese Fassungen nicht zu einem einzigen zeitlosen Entwurf zusammenschieben lassen. Die bleibende Idee ist eine ausdrückliche Priorität zwischen Regelgruppen.

Am Ende trägt der Knopf weiterhin genau eine berechnete Farbe. Innerhalb einer Ebene spielt Spezifität nach wie vor ihre Rolle. Aber wenn jemand am Montag fragt, wer dem Knopf Lila verordnet hat, kann das Team erst auf die Ebenenfolge und dann auf den betreffenden Selektor zeigen. Der Freitagsfix darf bleiben; er muss sich nur auf seinen Platz setzen.