CSS-Formatierer
Formatiere minifiziertes oder unordentliches CSS zu sauberen, eingerückten Regeln.
Verwandte Tools
CSS-Formatierer
Füge minifiziertes oder von Hand verstricktes CSS ein, und der Formatierer entfaltet es zu einem sauberen, lesbaren Stylesheet: eine Deklaration pro Zeile, der Selektor mit seiner öffnenden geschweiften Klammer auf einer Zeile, die schließende Klammer auf einer eigenen und eine Leerzeile zwischen Regeln der obersten Ebene. Verschachtelte Blöcke wie @media, @supports und verschachtelte Selektoren werden eine Ebene tiefer eingerückt, sodass die Struktur des Stylesheets auf einen Blick erkennbar ist.
Das Tool liest dein CSS Zeichen für Zeichen statt es mit groben Mustern zu zerteilen, also verschluckt es sich nie an kniffligem Inhalt. Zeichenketten behalten ihren genauen Inhalt, sodass content: "a{b}" mitsamt den Klammern darin erhalten bleibt. url()-Inhalte werden wörtlich kopiert, sodass eine Daten-URI mit eigenen Semikolons und Doppelpunkten — url(data:image/png;base64,...) — völlig unberührt bleibt. Kommentare bleiben Wort für Wort auf ihrer eigenen Zeile in der aktuellen Einrückung.
Drei Optionen stimmen die Ausgabe ab. Einrückung wechselt zwischen zwei Leerzeichen, vier Leerzeichen oder einem Tabulator. Ein Selektor pro Zeile setzt jeden Selektor einer Kommaliste auf eine eigene Zeile, praktisch bei langen gruppierten Regeln und für sauberere Diffs. Leerzeile zwischen Regeln lässt sich abschalten, wenn du das Stylesheet kompakter willst. Die Live-Zählung zählt beim Tippen Regeln, Deklarationen und Ausgabezeilen, wobei die Regelanzahl hervorgehoben ist.
Es ist das Gegenstück zu einem CSS-Minifier: nutze es, um eine komprimierte Produktionsdatei wieder bearbeitbar zu machen, uneinheitlichen Code mehrerer Autoren zu vereinheitlichen oder einfach ein Stylesheet zu lesen, das du nicht geschrieben hast. Alles läuft vollständig in deinem Browser — dein CSS wird nirgendwohin hochgeladen.