Benennen Sie bis zu acht Schichten, bearbeiten Sie ihre CSS-Regeln und legen Sie die Deklarationsreihenfolge fest. Kopieren Sie die erzeugte @layer-Deklaration und die Blöcke in Ihr Stylesheet.
Läuft lokal in deinem BrowserDer Planer führt eine einzige Liste von Kaskadenschichten. Jeder Eintrag hat einen Namen und die zugehörigen Regeln, und der Export schreibt eine Deklaration — @layer reset, tokens, base, components, utilities; — und danach einen Block pro Schicht in dieser Reihenfolge. Der Stapel rechts ist dieselbe Liste von oben nach unten: Die erste Karte wird zuerst deklariert, die letzte gewinnt, wenn zwei Schichten dieselbe Eigenschaft setzen.
Der Plan startet mit fünf Schichten (reset, tokens, base, components und utilities) mit je einer kurzen Beispielregel; ausgewählt ist die vierte. Einen Startknopf gibt es nicht: Stapel, Anzeige und Codebereich folgen jedem Tastendruck, und CSS kopieren legt genau diesen Text in die Zwischenablage.
Kaskadenschichten werden in der Reihenfolge aufgelöst, in der sie deklariert sind; die zuletzt genannte Schicht gewinnt, wenn beide dieselbe Eigenschaft setzen. Der Stapel beschriftet die beiden Enden dieser Ordnung — Zuerst deklariert · niedrigere Priorität auf der ersten Karte, Zuletzt deklariert · höhere Priorität auf der letzten —, die Schichten dazwischen tragen nur das @layer-Zeichen.
Nach vorn und Nach hinten verschieben die gewählte Schicht jeweils um eine Position, und die Deklarationszeile oben wird sofort neu geschrieben: Die Schichten im Stapel sind genau die Namen der Deklaration, in dieser Reihenfolge.
Ein Schichtname wird zu einem CSS-Bezeichner: Der Planer schreibt ihn klein, ersetzt alles außerhalb von a-z, 0-9, _ und - durch einen Bindestrich, schneidet Bindestriche an beiden Enden ab und stellt x- voran, wenn er mit einer Ziffer beginnt. MAIN LAYER wird also zu main-layer, ein leeres Feld zu layer.
Der Arbeitsbereich setzt zwei Grenzen: Ein Plan fasst eine bis acht Schichten, und das Namensfeld endet bei 36 Zeichen. Die letzte Schicht entfernen oder die neunte hinzufügen ändert nichts am Plan — der Grund erscheint über dem Bereich.
Eine Schicht auf einen bereits vergebenen Namen umzubenennen ist erlaubt, doch der Export wiederholt diesen Namen und der Browser verschmilzt beide Blöcke zu einer Schicht: Die Regeln beider Karten landen zusammen. Der Arbeitsbereich meldet das sofort, damit die Dopplung vor dem Kopieren sichtbar ist.
Der Plan verlässt die Seite nicht: Liste, Regeln und Deklaration entstehen im Browser, CSS kopieren schreibt sie direkt in die Zwischenablage, und es gibt weder Upload noch Konto oder Startknopf. Zurücksetzen bringt jederzeit die fünf Standardschichten zurück.