UTILS.
100 % im Browser
{ }

CSS-Beautifier

Minimiertes CSS mit korrekten Zeilenumbrüchen und Abständen formatieren und einrücken.

— Ausgabe erscheint hier —

Über dieses Tool

Der CSS-Beautifier ist ein kostenloser Formatter, der direkt im Browser läuft und minifiziertes oder unübersichtliches CSS in ein sauberes, gleichmäßig eingerücktes Layout verwandelt. Zunächst werden vorhandene Leerräume zusammengefasst, dann wird die Struktur von Grund auf neu aufgebaut: Jede Regel und jede Deklaration steht in einer eigenen Zeile, eine öffnende geschweifte Klammer bleibt in der Selektorzeile, eine schließende Klammer rückt in eine eigene Zeile, und verschachtelte Blöcke werden pro Ebene um zwei Leerzeichen eingerückt.

Es arbeitet ausschließlich mit den Satzzeichen, die Selektoren, Blöcke und Deklarationen trennen, und fügt nach jedem Doppelpunkt einer Deklaration ein einzelnes Leerzeichen sowie vor einer öffnenden Klammer ein Leerzeichen ein. Eigenschaftsnamen und Werte bleiben unverändert, sodass sich nur die Abstände ändern und das Styling unberührt bleibt. Die Formatierung erfolgt live während der Eingabe, vollständig in Ihrem Browser – keine Uploads, keine Konten, kein Tracking, und es funktioniert offline.

Das ist praktisch, wenn Sie ein komprimiertes Stylesheet aus einer Build-Ausgabe lesen, vergleichen oder von Hand bearbeiten möchten oder einen einzeiligen Ausschnitt in etwas Lesbares aufklappen wollen. Fügen Sie das CSS ein, prüfen Sie das aufgeräumte Ergebnis im Ausgabefeld und kopieren Sie es mit einem Klick.

Häufig gestellte Fragen

Verändert es meine Styles?
Nein. Es passt nur Leerräume und Einrückung an – Eigenschaftsnamen, Werte und Selektoren bleiben genau so, wie sie geschrieben wurden, sodass das gerenderte Ergebnis identisch ist.
Wird mein CSS irgendwohin gesendet?
Nein. Die Formatierung läuft lokal in JavaScript, ohne Uploads, ohne Konten und ohne Tracking, sodass sie auch offline funktioniert.
Kann es minifiziertes CSS aufklappen?
Ja. Zunächst werden alle vorhandenen Leerräume zusammengefasst und dann von Grund auf neu eingerückt, sodass einzeiliges minifiziertes CSS und weitläufiges mehrzeiliges CSS dasselbe aufgeräumte Ergebnis liefern.
Validiert oder korrigiert es mein CSS?
Nein. Es ordnet die Abstände rund um geschweifte Klammern, Semikolons und Doppelpunkte neu, prüft das CSS aber nicht per Linter und korrigiert es nicht, sodass vorhandene Syntaxfehler unverändert durchgereicht werden.

Weitere Tools