CSS-Formatter / Minifier

Den CSS-Formatter verwenden

1. Dein Stylesheet einfügen in das Eingabe-Textfeld. Rohes unminiertes CSS, ein einzeiliges Produktions-Bundle oder ein aus den DevTools kopiertes Fragment funktionieren alle.
2. Einen Einrückungsstil wählen aus dem Dropdown: 2 Leerzeichen (der verbreitete Prettier-Standard), 4 Leerzeichen (Googles CSS-Styleguide) oder ein Tab-Zeichen.
3. Auf Format klicken, um die Quelle in eine Deklaration pro Zeile mit geschweiften Klammern auf eigenen Zeilen zu expandieren, oder auf Minimieren, um die Regeln in ein einzeiliges Bundle zu kollabieren, das zum Ausliefern geeignet ist.
4. Das Ergebnis kopieren mit der Schaltfläche über dem Ausgabebereich. Operationen können auch verkettet werden: formatieren zum Überprüfen, dann dasselbe Buffer minimieren, bevor in ein Build-Artefakt eingefügt wird.

Was das Werkzeug macht und wie es funktioniert

Der Formatter durchläuft den Quellcode Zeichen für Zeichen mit einem leichten Tokenizer, der drei Zustände verfolgt: innerhalb eines Selektors, innerhalb eines Deklarationsblocks und innerhalb eines Strings oder url()-Literals. Wenn er auf eine öffnende geschweifte Klammer trifft, erhöht er einen Einrückungszähler, gibt einen Zeilenumbruch aus und puffert Deklarationen bis zur übereinstimmenden schließenden Klammer. Semikolons lösen Zeilenumbrüche zwischen Deklarationen aus, und At-Regeln wie @media, @supports und @keyframes werden erkannt, sodass ihre verschachtelten Blöcke eine zusätzliche Einrückungsebene erhalten.

Minimierung führt den entgegengesetzten Durchgang aus: Leerzeichen kollabieren zu einzelnen Leerzeichen, Leerzeichen um {, }, :, ; und , verschwinden, und nachfolgende Semikolons innerhalb der letzten Deklaration jedes Blocks werden entfernt. Kommentare durch /* ... */ werden vollständig entfernt. Da der Tokenizer keinen vollständigen AST aufbaut, bewahrt er unbekannte Eigenschaften und Vendor-Prefixes unverändert, anstatt sie abzulehnen.

Wann du darauf zurückgreifst

• Ein minimiertes Stylesheet untersuchen, das von einer Produktionssite ausgeliefert wird, ohne eine vollständige IDE zu öffnen.
• Ein CSS-Snippet für einen Blog-Post, eine Stack-Overflow-Antwort oder Code-Review vorbereiten, wo lesbare Diffs wichtig sind.
• Ein handgeschriebenes Stylesheet schrumpfen, bevor es in eine transaktionale E-Mail-Vorlage ohne Build-Schritt eingebettet wird.
• Eine bestehende Codebasis zwischen zwei- und vierstelliger Einrückung umschalten, wenn eine neue Lint-Konfiguration übernommen wird.
• Prüfen, ob die Stile eines kopierten Drittanbieter-Widgets keine überraschenden Imports oder nicht geschlossenen Klammern enthalten.
• Die Ausgaben mehrerer Generatoren (Sass, PostCSS, Tailwind JIT) normalisieren, sodass Diffs in Git über Inhalt und nicht über Leerzeichen sind.

Typische Fallstricke

• Nicht geschlossene Blöcke. Eine fehlende } lässt jeden nachfolgenden Selektor verschachtelt erscheinen. Das Werkzeug gibt weiterhin Ausgabe aus, aber der Einrückungszähler driftet; nach Selektoren mit unmöglich tiefer Einrückung suchen und die Quelle reparieren.
• Data-URIs. Lange Base64-Payloads innerhalb von url(data:image/png;base64,...) werden unberührt beibehalten. Der Minifier lässt sie in Ruhe, weil Zeilenumbrüche die dekodierten Bytes korrumpieren würden.
• CSS-Custom-Properties mit Semikolons. Ein Wert wie --content: "a;b"; wird korrekt behandelt, weil der Tokenizer den String-Zustand verfolgt, aber nur wenn übereinstimmende Anführungszeichen verwendet wurden.
• Calc mit Leerzeichen. Operatoren in calc(100% - 16px) erfordern umgebendes Leerzeichen gemäß CSS Values Level 4; der Minifier bewahrt die einzelnen Leerzeichen dort.
• Verschachteltes CSS. Natives Nesting (Chrome 112+) mit & parst korrekt, wird aber als gewöhnliche Blöcke behandelt, sodass du die Einrückung aus den DevTools deines Browsers behalten möchtest.

CSS-Syntax-Hintergrund

Die formale Grammatik lebt im W3C-Dokument CSS Syntax Module Level 3. Diese Spezifikation definiert CSS als Strom von Token: Leerzeichen, Kommentare, Bezeichner, Funktionen, At-Schlüsselwörter und Blöcke begrenzt durch {, [ und (. Jegliches Leerzeichen zwischen Token ist semantisch irrelevant, außer innerhalb von Strings und calc()-Operatoren, weshalb sowohl "hübsche" als auch "minimierte" Darstellungen dasselbe Stylesheet beschreiben. Browser sind verpflichtet, Fehlerwiederherstellung zu implementieren - eine unbekannte Eigenschaft wird bis zum nächsten Semikolon übersprungen und ein fehlerhafter Block bis zur nächsten übereinstimmenden geschweiften Klammer - weshalb schlechtes CSS bei einigen Regeln noch "funktioniert".

Vergleich mit anderen Werkzeugen

Gegenüber Prettier oder stylelint --fix ist dieses Werkzeug absichtlich kleiner. Prettier baut einen vollständigen PostCSS-AST auf und formatiert gemäß einem Stil, der lange Selektoren, Eigenschaftssortierung und Anführungsnormalisierung handhabt, die ein regex-basierter Durchgang nicht kann. Wenn du in einem Repo arbeitest, npx prettier --write oder das Format-beim-Speichern des Editors bevorzugen. Wo dieses Werkzeug gewinnt, ist der zero-install-Fall: einmalige Snippets aus einem DevTools-Panel, Inline-E-Mail-CSS oder eine schnelle Minimierung für ein CMS-Feld ohne Build-Pipeline. Für schwere Minimierung (Entfernung toter Regeln, Shorthand-Zusammenführung) cssnano oder lightningcss verwenden; dieses Werkzeug ist ein Kompressor, kein Optimierer.