CSS-Formatierer

Füge ein CSS-Stylesheet oder einen Ausschnitt ein, und dieses Tool formatiert es mit einheitlicher Einrückung oder komprimiert es auf eine einzige dichte Zeile. Fehlerhaftes CSS mit nicht geschlossenen Klammern oder verwaisten Regeln wird trotzdem formatiert statt einen Fehler auszulösen, sodass du unsauberes CSS aufräumen kannst, ohne vorher jeden Syntaxfehler zu korrigieren.

Wie funktionieren Formatierung und Minifizierung?

Das lesbare Formatieren läuft über die Bibliothek js-beautify, die du auf 2 Leerzeichen, 4 Leerzeichen oder Tabs einstellen kannst. Sie arbeitet mit Tokens statt mit einem strengen Parser, sodass ein Stylesheet mit fehlender schließender Klammer oder einem verirrten Semikolon trotzdem brauchbar eingerückt herauskommt, statt einen Fehler zu werfen. Das ist wichtig, wenn du CSS aufräumst, das aus den Entwicklertools des Browsers kopiert wurde oder aus einer halbfertigen Datei stammt. Das Minifizieren geht den umgekehrten Weg: Kommentare fallen weg, Leerraum wird zusammengezogen, überflüssige Leerzeichen um { } ; : , > verschwinden, während der Inhalt von Anführungszeichen-Strings und url(...)-Aufrufen unangetastet bleibt, damit ein Pfad oder ein Schriftname mit Leerzeichen intakt bleibt.

Der Minifizierer arbeitet mit einer Reihe regulärer Ausdrücke statt mit einem vollständigen CSS-Parser, daher gibt es zwei bekannte Grenzfälle: Eine url() mit einer wörtlichen schließenden Klammer innerhalb eines in Anführungszeichen stehenden Arguments wird nicht korrekt behandelt, und das Zusammenziehen von Leerraum vor einem Doppelpunkt kann einen Nachfahren-Kombinator mit einer folgenden Pseudoklasse verschmelzen (aus a :hover wird a:hover, was ändert, worauf der Selektor zutrifft). Beide Fälle sind im echten CSS-Alltag selten, und das Tool nimmt dieses kleine Risiko in Kauf, damit es an unsauberer Eingabe nie hängen bleibt.

Wird mein CSS irgendwohin hochgeladen?

Nein. Formatierung und Minifizierung laufen komplett in deinem Browser mit der eingebundenen Bibliothek, es wird nichts an einen Server gesendet. Proprietäre Stylesheets, Kundenarbeiten oder gescrapte Ausschnitte mit echten Inhalten bleiben auf deinem Rechner, was nützlich ist, wenn das CSS aus einer internen Codebasis stammt, die du nicht in ein beliebiges Webformular einfügen möchtest.

Typische Anwendungen: ein minifiziertes, per view-source gespeichertes Stylesheet aufräumen, eine CSS-Datei vor der Veröffentlichung verkleinern, oder die Styles einer Komponente für ein Code-Review auf eine einheitliche Einrückungsbreite bringen. Wie Selektoren, Deklarationen und At-Rules zusammenspielen, steht in der MDN-Referenz zur CSS-Syntax.