CSS formatieren
Der CSS-Formatierer rückt ein Stylesheet in Ihrem Browser neu ein und minifiziert es. Er tokenisiert, statt zu parsen – deshalb laufen unbekannte At-Rules und neuere Syntax als das Tool unverändert durch: Ein Parser verwirft, was er nicht erkennt, und für einen Formatierer ist es immer besser, etwas Unverstandenes zu erhalten, als es zu löschen.
Wie funktioniert CSS formatieren?
CSS zu formatieren heißt vor allem zu wissen, wo etwas anfängt und aufhört – und an vier Stellen ist die naive Antwort falsch.
Eine geschweifte Klammer ist nicht immer ein Block
content: "}" enthält eine schließende geschweifte Klammer innerhalb eines Strings, und /* } */ eine innerhalb eines Kommentars. Auf Klammern zu trennen, ohne diese Zustände zu verfolgen, ergibt einen Formatierer, der jedes Stylesheet verhunzt, das einen Pseudo-Element-Zähler oder eine auskommentierte Regel enthält. Das obige Beispiel enthält beides, mit Absicht.
Ein Doppelpunkt ist nicht immer ein Eigenschafts-Trenner
background: url(https://example.com/x.png) hat einen Doppelpunkt innerhalb des Werts, und der Wert einer Custom Property kann überhaupt alles enthalten – genau das macht Custom Properties nützlich. Getrennt wird am ersten Doppelpunkt, der nicht innerhalb von Klammern steht.
Ein Komma ist nicht immer ein Selektor-Trenner
:is(a, b) span ist ein Selektor, der ein Komma enthält, und :nth-child(2n of .x, .y) ist ein anderer. Eine Selektorliste an einem nackten Komma zu trennen zerstört beide. Getrennt wird nur auf der obersten Ebene, was auch rgb(0, 0, 0) in einem Wert intakt lässt.
Ein Tokenizer überlebt einen Parser
CSS gewinnt ständig Syntax hinzu: Verschachtelung, @container, @layer, :has(), relative Farbsyntax. Ein Parser muss jede davon modellieren und verwirft alles, was er nicht kennt – er bricht also an CSS, das Browser bereits akzeptieren. Ein Tokenizer muss nur wissen, wo Strings, Kommentare, Blöcke und Semikolons liegen, und das ist seit CSS 1 stabil. Unbekannte Syntax wird durchgereicht statt verworfen; das ist das einzige Verhalten, das ein Formatierer verantworten kann.
Minifizieren behält einen Lizenzkommentar
/*! … */ ist die Konvention für einen Kommentar, den ein Minifizierer erhalten muss; er trägt meist eine Lizenz – ihn zu entfernen kann die Bedingungen verletzen, unter denen das Stylesheet verbreitet wurde. Alles andere fliegt. Auch das letzte Semikolon vor einer schließenden Klammer fliegt, denn es trennt eine Deklaration von nichts.
Was das Minifizieren hier nicht tut, ist Werte umschreiben: kein Verkürzen von #ffffff zu #fff, kein Zusammenfassen von Regeln, kein Umordnen. Das sind echte Gewinne, und genau dort wird ein Minifizierer zu einem Compiler mit einer Fehlerfläche. Für eine Build-Pipeline nehmen Sie einen echten Minifizierer; dieses Tool macht ein Stylesheet klein genug zum Einfügen.
Eingabe
a,b{color:red;margin:0}Formatiert
a,
b {
color: red;
margin: 0;
}Welche Optionen und Sonderfälle unterstützt CSS formatieren?
| Parameter | Typ | Standard | Verhalten & Sonderfälle |
|---|---|---|---|
| Einrückung | Leerzeichen | 2 | Wird pro Ebene der Verschachtelung angewendet, also wird eine Regel innerhalb einer Media-Query zweimal eingerückt. |
| Selector pro Zeile | Boolesch | on | Jeder Selector in einer kommagetrennten Liste erhält seine eigene Zeile. Die Trennung erfolgt nur auf der obersten Ebene, also bleibt :is(a, b) intakt. |
| Leerzeile zwischen Regeln | Boolesch | on | Eine Leerzeile nach jeder Regel auf oberster Ebene, was eine lange Stylesheet-Datei übersichtlicher macht. |
| Kommentare beibehalten | Boolesch | on | Mehrzeilige Kommentare behalten ihre interne Form bei, anstatt neu umgebrochen zu werden, da ASCII-Art-Abschnittsbanner üblich sind und ein Umbruch diese zerstören würde. |
| Strings | erhalten | — | content: "}" enthält eine schließende geschweifte Klammer. Die Verfolgung des String-Zustands ist es, was verhindert, dass dies das Blockende bewirkt. |
| url() | als Ganzes erfasst | — | Ein nicht in Anführungszeichen gesetztes url() kann Zeichen enthalten, die sonst strukturell wären, einschließlich Doppelpunkte und Klammern in einer data-URI. |
| At-Regeln | verschachtelt | — | @media, @supports, @layer, @container und alles Neuere. Unbekannte At-Regeln werden durchgelassen, anstatt verworfen zu werden. |
| Minifizieren | nur Leerzeichen | — | Zusammengeführte Leerzeichen und das letzte Semikolon in einem Block werden entfernt. Werte werden nicht umgeschrieben und Regeln nicht zusammengeführt – das ist die Aufgabe eines Build-Schritts, nicht einer Paste-Box. |
| Lizenzkommentare | /*! … */ | beibehalten | Werden beim Minifizieren beibehalten, nach der Konvention, der jeder Minifier folgt. Das Entfernen eines solchen Kommentars kann die Lizenz verletzen, die er trägt. |
Häufig gestellte Fragen
Zerbricht es an meinem verschachtelten CSS oder an @container-Queries?
Nein, und genau darum geht es beim Tokenisieren statt Parsen. Der Formatierer muss nur wissen, wo Strings, Kommentare und Blöcke anfangen und aufhören – er muss nicht verstehen, was eine At-Rule bedeutet. Syntax, die jünger ist als das Tool, läuft unverändert durch; das Gegenteil dessen, was ein Parser tut, wenn er auf etwas trifft, das er nicht erkennt.
Warum enthält die minifizierte Ausgabe immer noch einen Kommentar?
Weil er mit /*! beginnt statt mit /*. Das ist die Konvention, die jeder Minifizierer für einen Kommentar befolgt, der überleben muss; er trägt fast immer eine Lizenz – ihn zu entfernen kann die Verbreitungsbedingungen des Stylesheets verletzen. Normale Blockkommentare werden entfernt.
Warum spart das Minifizieren weniger als ein echtes Build-Tool?
Weil hier nur Leerraum entfernt wird. Ein Produktions-Minifizierer verkürzt zusätzlich Farben, fasst doppelte Regeln zusammen, wirft überlagerte Deklarationen weg und schreibt Kurzschreibweisen um – jedes davon eine echte Ersparnis und zugleich eine Transformation, die das Verhalten ändern kann, wenn sie einen Grenzfall falsch trifft. Für eine Build-Pipeline nehmen Sie einen echten Minifizierer; dieses Tool macht ein Stylesheet klein genug, um es irgendwo einzufügen.
Warum wurde meine Selektorliste nicht an jedem Komma getrennt?
Weil einige dieser Kommas innerhalb einer funktionalen Pseudoklasse liegen. :is(.card, .panel) ist ein Selektor, der zufällig ein Komma enthält; eine Trennung dort ergäbe zwei Selektoren, die beide ungültig sind. Getrennt wird nur auf der obersten Ebene – dieselbe Regel, die rgb(0, 0, 0) in einem Wert intakt lässt.
Prüft es mein CSS?
Nein. Es formatiert ein Stylesheet mit falsch geschriebener Eigenschaft oder ungültigem Wert, ohne zu murren – ein Formatierer, der unbekannte Eigenschaften zurückwiese, würde jeden Vendor-Prefix und jedes neue Feature zurückweisen. Brauchen Sie Validierung, markieren die DevTools des Browsers unbekannte Eigenschaften im Styles-Panel; das ist ein verlässlicheres Signal als jede statische Liste.
Wird mein Stylesheet hochgeladen?
Nein. Tokenisieren und Formatieren laufen in Ihrem Browser. Das zählt bei CSS weniger als bei einer Nutzlast, aber es zählt ein bisschen: Ein Stylesheet aus einem unveröffentlichten Produkt beschreibt das Produkt, und ein Stylesheet aus einem internen Tool beschreibt das interne Tool.