CSS-Formatierer
Formatieren Sie minifiziertes CSS mit einer Deklaration pro Zeile, eingerückten @media-Blöcken und Selektoren, aufgeteilt so, wie Sie es bevorzugen.
Eingabe
Ergebnis
Das Ergebnis erscheint hier.Minifiziertes CSS von einem CDN oder aus einem Produktions-Build ist absichtlich unlesbar. Dieses Werkzeug entfaltet es mit dem CSS-Beautifier aus js-beautify: eine Deklaration pro Zeile, eine Leerzeile zwischen Regeln, eingerückte @media- und @supports-Blöcke und Kombinatoren wie > mit etwas Luft. Genau das brauchen Sie, um ein fremdes Stylesheet zu lesen, zu prüfen, was ein Build tatsächlich ausgeliefert hat, oder handgeschriebenes CSS aufzuräumen, bevor es in einen Pull Request geht.
So arbeitet es
- Jeder Selektor einer kommagetrennten Liste bekommt standardmäßig eine eigene Zeile; schalten Sie das aus, um .card, .panel zusammenzuhalten.
- Kommentare bleiben, wo sie waren, einschließlich der /*!-Lizenzbanner, die Minifier behalten.
- Werte bleiben genau so, wie sie geschrieben sind – Farben, Einheiten und Custom Properties bekommen neue Abstände, werden aber nie umgeschrieben.
Wohin Ihre Daten gehen
Nirgendwohin. Dieses Werkzeug läuft vollständig in Ihrem Browser: Der eingefügte Text wird von der Seite verarbeitet und weder an einen Server übertragen noch protokolliert.
Dieses Tool ist kostenlos und braucht kein Konto. Die Ergebnisse existieren nur in Ihrer geöffneten Seite und werden nirgends gespeichert.
Was es kostet
Dieses Werkzeug ist kostenlos, ohne Anmeldung und ohne Punkte.
Häufige Fragen
- Korrigiert oder validiert es mein CSS?
- Nein. Es ändert nur Leerraum, ein fehlendes Semikolon oder eine falsch geschriebene Eigenschaft kommt also formatiert, aber weiterhin fehlerhaft heraus. Formatieren macht solche Fehler allerdings leichter erkennbar, weil jede Deklaration in einer eigenen Zeile landet.
- Unterstützt es SCSS oder Less?
- Teilweise. Der CSS-Modus von js-beautify kommt mit Verschachtelung und dem Großteil der SCSS- und Less-Syntax gut genug zurecht, um sie zu lesen, aber Mixins mit komplexen Argumenten und manche Interpolation können seltsame Abstände bekommen. Für Quelldateien, die Sie committen, ist Prettier mit seinem SCSS-Parser die sicherere Wahl.
- Kann Formatieren das Aussehen der Seite verändern?
- Das sollte es nicht. Leerraum zwischen Deklarationen und um Selektoren hat keinen Einfluss auf die Darstellung. Die einzige Ausnahme ist der seltene alte Browser-Hack, der von exaktem Leerraum abhängt – so etwas enthalten moderne Stylesheets nicht mehr.
Das Open Source dahinter
Dieses Werkzeug läuft auf beautifier/js-beautify, veröffentlicht unter MIT. Wer dasselbe Verhalten im eigenen Programm braucht, greift zu dieser Bibliothek.
beautifier/js-beautifyAuch bekannt als
- CSS formatieren
- CSS Beautifier
- CSS unminify
- CSS formatieren online
- CSS Pretty Print
- CSS Formatter online