Einheitliches CSS mit Prettier
Der CSS Formatter nutzt Prettier, um Stylesheets nach festen Regeln neu zu schreiben: jeder Selektor und jede Deklaration auf eigener Zeile, einheitliche Einrückung, ein Leerzeichen nach dem Doppelpunkt, Semikolon am Ende jeder Deklaration und Leerzeilen zwischen Regeln. Minifiziertes CSS, das in einer einzigen Zeile steht, wird so wieder lesbar.
Neben normalem CSS werden auch SCSS und Less unterstützt, mit Verschachtelung, Variablen, Mixins und Funktionen. Der passende Parser wird anhand der Dateiendung (.css, .scss, .less) gewählt; bei eingefügtem Code stellen Sie ihn über einen Auswahlschalter auf CSS, SCSS oder Less. Werte, Selektoren und die Reihenfolge der Regeln bleiben unverändert, es ändert sich nur die Formatierung.
Sie wählen die Einrückung mit 2 oder 4 Leerzeichen oder Tabs und eine Zeilenbreite von 80, 100 oder 120 Zeichen. Lange Selektorlisten und Werte wie mehrteilige Schatten oder Verläufe werden passend umbrochen. Syntaxfehler werden mit der Meldung des Parsers angezeigt, was beim Aufspüren einer fehlenden Klammer hilft. Formatiertes CSS ist nicht nur schöner, es spart Zeit: Sie finden eine bestimmte Eigenschaft schneller, sehen doppelte Deklarationen und erkennen in einem Diff sofort, welche Zeile sich geändert hat. Wenn mehrere Personen an einem Stylesheet arbeiten, sorgt ein einheitliches Format dafür, dass Änderungen nicht in Formatierungsunterschieden untergehen. Kommentare bleiben beim Formatieren erhalten, ebenso Media Queries, @supports-Blöcke, benutzerdefinierte Eigenschaften und in SCSS auch Platzhalter, @use und @include.
Die Formatierung läuft in Ihrem Browser, das Stylesheet wird nicht hochgeladen. Kostenlos verarbeiten Sie eine Datei oder einen eingefügten Text und können denselben Text mit anderen Optionen neu formatieren. Für neue Eingaben, mehrere Dateien gleichzeitig mit ZIP-Download und ohne Werbung gibt es ToolStudio Pro, jederzeit kündbar.
So formatieren Sie CSS
- CSS, SCSS oder Less einfügen oder eine .css-, .scss- oder .less-Datei ablegen bzw. auswählen.
- Bei eingefügtem Code die Sprache wählen: CSS, SCSS oder Less.
- Einrückung und Zeilenbreite einstellen.
- Formatierung starten.
- Ergebnis kopieren oder herunterladen.
Typische Einsatzzwecke
- Minifiziertes CSS einer Website oder Bibliothek lesen und verstehen.
- SCSS- oder Less-Dateien aus verschiedenen Quellen vereinheitlichen.
- CSS aus den Entwicklerwerkzeugen des Browsers sauber übernehmen.
- Fehlende Klammern oder Semikolons über die Fehlermeldung finden.
- Code für Dokumentation, Tutorials oder Pull Requests aufbereiten.
Vorher und nachher
Aus .btn{color:#fff;background:#06c}.btn:hover{background:#05a} wird nach dem Formatieren ein Block pro Regel: .btn { mit color: #fff; und background: #06c; auf eigenen, eingerückten Zeilen, danach eine Leerzeile und die Regel .btn:hover.
Formatieren und Minifizieren sind Gegenstücke: Formatieren Sie während der Arbeit, minifizieren Sie für die Auslieferung.
Häufig gestellte Fragen
Werden SCSS und Less unterstützt?
Ja. Der Parser wird über die Dateiendung oder den Auswahlschalter CSS, SCSS oder Less festgelegt.
Ändert der Formatter meine Styles?
Nein. Werte, Selektoren und Reihenfolge bleiben gleich, nur Leerraum und Zeilenumbrüche ändern sich.
Wird das CSS hochgeladen?
Nein, die Formatierung findet ausschließlich in Ihrem Browser statt.
Kann ich Tabs statt Leerzeichen verwenden?
Ja, wählen Sie 2 Leerzeichen, 4 Leerzeichen oder Tabs.
Ist das kostenlos?
Eine Datei oder ein eingefügter Text ist kostenlos; denselben Text können Sie mit anderen Optionen neu formatieren. Für neue Eingaben brauchen Sie ToolStudio Pro: unbegrenzt, mehrere Dateien als ZIP, ohne Werbung, jederzeit kündbar.