CSS-Beautifier – kostenlos
Minifiziertes CSS mit einheitlicher Einrückung lesbar formatieren oder CSS minifizieren. Optional alphabetische Sortierung der Eigenschaften für nachvollziehbare Diffs.
Datei hierher ziehen oder zum Auswählen klicken
CSS · Verarbeitung auf Ihrem Gerät
oder drücken Sie Strg+V, um aus der Zwischenablage einzufügen
Ausgabe erscheint hier…Häufige Anwendungen
- CSS der Produktion debuggenSehen Sie sich minifiziertes CSS von Produktionsseiten in lesbarem Format an, um Stile zu finden und umzukehren.
- Team-CSS-Stil erzwingenFühren Sie vom Team eingereichte CSS durch einen konsistenten Beautifier durch, damit Diffs über Inhalte und nicht über Formatierung gehen.
- Formatieren Sie herstellergepräfixtes CSSHerstellergepräfixtes CSS (Autoprefixer-Ausgabe) enthält oft viele -webkit-, -moz-, -ms-Varianten. Formatieren Sie zum Inspizieren.
- Lernen Sie von professionellem CSSStudieren Sie CSS aus berühmten Designsystemen, indem Sie ihre kompilierte Ausgabe formatieren.
- Formatieren Sie CSS für Bug-BerichteBeim Eintragen von CSS-Bugs ist formatiertes CSS für Reviewer viel einfacher zu lesen und zu verstehen.
So funktioniert es
Dieses Tool formatiert CSS mit einem selbst geschriebenen rekursiven Parser direkt in der Seite – keine Drittanbieter-Bibliothek, kein Serveraufruf. Der Parser geht Ihr CSS Zeichen für Zeichen durch und behandelt Zeichenketten in Anführungszeichen, url()-Werte, verschachtelte At-Regeln und Kommentare korrekt, die einfachere Regex-Ansätze verwirren würden.
- 1Tokenisierung auf ZeichenebeneDie Funktion walkCss durchsucht die Roheingabe Zeichen für Zeichen und verfolgt Anführungszeichen-Status und Klammertiefe, damit Semikolons oder geschweifte Klammern in url(), Zeichenkettenwerten oder Kommentaren nie für strukturelle Trennzeichen gehalten werden.
- 2Trennung von Blöcken und DeklarationenFindet der Scanner eine öffnende geschweifte Klammer auf oberster Ebene, extrahiert er den Vorspann (den Selektor oder das At-Regel-Schlüsselwort) und verarbeitet den Blockinhalt rekursiv – der selbst verschachtelte Regeln enthalten kann (@media, @supports, natives CSS-Nesting), die in tieferer Rekursion behandelt werden.
- 3Eigenschaftssortierung und EinrückungDeklarationen innerhalb jedes Blocks werden gesammelt, optional alphabetisch nach Eigenschaftsnamen sortiert und dann mit der gewählten Einrückung (2 oder 4 Leerzeichen) ausgegeben. Der Minify-Modus lässt Leerraum ganz weg und entfernt Kommentare.
- 4Sofortige Ausgabe im BrowserErgebnisse erscheinen während der Eingabe über einen useMemo-Hook – nichts wird irgendwohin gesendet. Das formatierte oder minimierte CSS kann in die Zwischenablage kopiert oder als .css-Datei heruntergeladen werden, und das Panel zeigt den Größenunterschied zum Original.
Ähnliche Tools
HTML-Beautifier & -Minifier
HTML mit korrekter Verschachtelungseinrückung formatieren oder minifizieren. Inhalt in <pre>-, <script>- und <style>-Blöcken bleibt erhalten.
SQL-Formatierer & -Beautifier
SQL-Abfragen mit korrekter Einrückung, konfigurierbarer Schlüsselwortgroßschreibung und Zeilenumbrüchen bei Hauptklauseln formatieren. Funktioniert mit jedem SQL-Dialekt.
CSS-Minifier & -Beautifier
Minifizieren Sie CSS zur Dateigrößenreduzierung oder verschönern Sie minifiziertes CSS zur besseren Lesbarkeit. Sofort, in Ihrem Browser.