Kostenloser CSS Beautifier
Dieser kostenlose CSS Beautifier wandelt minifizierte oder ungeordnete Stylesheets in lesbaren Code mit einer Deklaration pro Zeile, einem Leerzeichen nach jedem Doppelpunkt und eingerückten Regeln um. Verschachtelte Blöcke wie Media Queries werden eine Ebene tiefer eingerückt. Kommentare, Strings und url()-Werte bleiben genau wie geschrieben. Das Tool eignet sich für Entwickler, die ein minifiziertes Stylesheet lesen oder bearbeiten müssen.
CSS Beautifier
Generators and Converters
Über dieses Tool
Minifizierter CSS ist für Browser geschrieben, nicht für Menschen: Jede Regel sitzt auf einer Zeile und eine einzelne Farbe oder einen Rand zu finden bedeutet, Tausende von Zeichen zu durchsuchen. Das Formatieren stellt das Layout wieder her, das ein Stylesheet leicht überprüfbar macht.
Das Tool liest das Stylesheet Zeichen für Zeichen, sodass Semikola in url()-Daten und Klammern in Strings es nicht verwirren. Jeder Selektor startet einen neuen Block, jede Deklaration bekommt ihre eigene Zeile mit einem Leerzeichen nach dem Doppelpunkt, und Regeln in Media- oder Supports-Blöcken werden eine Ebene tiefer eingerückt. Kommentare bleiben an ihrer Stelle. Sie können zwei Leerzeichen, vier Leerzeichen oder Tabulatoren wählen.
Formatierung ändert nicht, was der CSS tut, und behebt keine Fehler: Eine fehlende Klammer zeigt sich als Einrückung, die sich nie zurückzieht. Kombinieren Sie es mit dem CSS Minifier, wenn Sie die Datei vor der Veröffentlichung wieder komprimieren möchten. Nichts, was Sie einfügen, wird gespeichert.
Häufig gestellte Fragen
Ändert das Formatieren, wie mein CSS funktioniert?
Nein. Nur Leerzeichen zwischen Regeln und Deklarationen ändern sich, sodass der Browser genau die gleichen Anweisungen liest. Strings, Kommentare und url()-Werte werden unverändert kopiert, was auch Inline-Datenbilder schützt.
Kann es SCSS oder LESS formatieren?
Einfacher CSS ist das Ziel. Einfache verschachtelte SCSS- und LESS-Blöcke werden normalerweise sinnvoll eingerückt, da Klammern auf die gleiche Weise behandelt werden, aber Funktionen wie Mixins mit ungewöhnlicher Syntax werden nicht verstanden. Überprüfen Sie das Ergebnis, bevor Sie sich darauf verlassen.
Warum kehrt eine schließende Klammer nicht nach links zurück?
Der Formatter folgt Ihren Klammern genau. Wenn einer Regel eine schließende Klammer fehlt, bleibt die Einrückung bis zum Ende der Datei tief. Das ist eine schnelle Möglichkeit, die fehlerhafte Regel zu finden, aber Sie müssen die fehlende Klammer selbst hinzufügen.
Wie mache ich es wieder klein?
Behalten Sie die formatierte Version während der Arbeit, führen Sie sie dann vor der Veröffentlichung durch den CSS Minifier. Der Minifier entfernt die Kommentare und Leerzeichen erneut, sodass Sie lesbaren Quellcode zum Bearbeiten und eine kompakte Datei für Besucher erhalten.