CSS-Formatierer & Verschönerer

Fügen Sie CSS oder minimierten CSS-Code ein und verschönern Sie ihn mit korrekter Einrückung oder minimieren Sie ihn für die Produktion. Unterstützt alle gängigen CSS-Syntaxvarianten.

Eingabe

Ausgabe

Funktionen

Umschalten zwischen Verschönern und Minifizieren

Eigenschaften sortieren

Duplikate entfernen

Anleitung

1. Fügen Sie Ihren CSS-Code in das Eingabefeld links ein.

2. Klicken Sie auf Formatieren zum Verschönern oder Minifizieren zum Komprimieren.

3. Kopieren Sie das formatierte Ergebnis aus dem rechten Bereich.

Über dieses Werkzeug

Minifiziertes oder von Hand bearbeitetes CSS ist schwer zu prüfen: Eine einzige lange Zeile verbirgt doppelte Regeln, fehlende Semikolons und Überschreibungen. Dieser Formatierer baut das Stylesheet mit einer Deklaration pro Zeile und einheitlicher Einrückung von zwei Leerzeichen, vier Leerzeichen oder Tabs neu auf und lässt dabei Strings, Kommentare und verschachtelte Blöcke wie @media und @supports unangetastet. Minifizieren macht das Gegenteil für den Produktivbetrieb und entfernt Kommentare und überflüssige Leerzeichen, um die Übertragungsgröße zu verringern. Sie können Code einfügen oder eine .css-Datei hineinziehen und das Ergebnis anschließend kopieren oder herunterladen. Formatieren ändert nur die Darstellung – Reihenfolge und Bedeutung Ihrer Regeln bleiben exakt gleich, die Kaskade verhält sich also wie zuvor.

Häufig gestellte Fragen

Ändert das Formatieren, wie sich mein CSS verhält?

Nein. Der Formatierer ändert nur Leerzeichen und Zeilenumbrüche. Selektoren, Deklarationen und deren Reihenfolge bleiben erhalten, sodass Spezifität und Kaskade genau wie vorher funktionieren.

Wie viel spart das Minifizieren von CSS?

Das Entfernen von Kommentaren und Leerzeichen verkleinert ein handgeschriebenes Stylesheet typischerweise um 15–30 %. Die Auslieferung mit gzip- oder Brotli-Kompression spart deutlich mehr – nutzen Sie im Produktivbetrieb also beides.

Werden @media, @supports und verschachtelte Regeln unterstützt?

Ja. At-Regeln und verschachtelte Blöcke werden je Ebene eingerückt, und ihr Inhalt wird wie jede andere Regel formatiert, sodass Media Queries gut überschaubar bleiben.

Bleiben Kommentare erhalten?

Beim Formatieren bleiben Blockkommentare erhalten und stehen in eigenen Zeilen. Beim Minifizieren werden sie entfernt, da der Browser sie nicht benötigt.

Prüft der Formatierer mein CSS auf Fehler?

Er validiert weder Eigenschaftsnamen noch Werte. Er formatiert, was er erhält, daher bleibt ein Tippfehler wie colr: red in der Ausgabe stehen; nutzen Sie Ihren Editor oder einen Linter wie Stylelint, um Fehler zu finden.

CSS-Formatierer & Verschönerer

Funktionen

Anleitung

Über dieses Werkzeug

Häufig gestellte Fragen

Verwandte Werkzeuge