CSS Formatter
Formatiere minimierte oder unübersichtliche Stylesheets mit diesem CSS-Formatter. Füge CSS ein, und das Werkzeug parst es. Anschließend gibt es jede Regel mit ihrem Selektor in einer Zeile aus, jede Deklaration in einer eigenen Zeile mit zwei Leerzeichen Einrückung und einem Leerzeichen nach dem Doppelpunkt, außerdem mit Abständen um Kombinatoren und verschachtelten At-Rules wie Media Queries. Parse-Fehler werden gemeldet. Ideal für Webentwickler und Designer, die Stylesheets aus beliebigen Quellen lesen, debuggen oder überprüfen möchten.
Häufig gestellte Fragen
Wie funktioniert der CSS-Formatter?
Er parst dein Stylesheet in Regeln, Deklarationen und At-Rules und gibt sie in einem einheitlichen Layout wieder aus. Da das CSS geparst wird, entspricht die Ausgabe der tatsächlichen Struktur des Stylesheets.
Wie sieht das formatierte CSS aus?
Jede Regel beginnt mit ihrem Selektor und einer öffnenden geschweiften Klammer. Jede Deklaration steht in einer eigenen Zeile mit zwei Leerzeichen Einrückung und einem Leerzeichen nach dem Doppelpunkt, und die schließende Klammer steht ebenfalls in einer eigenen Zeile. Selektorlisten werden mit Komma und Leerzeichen verbunden, und um Kombinatoren wie > und ~ stehen Leerzeichen.
Werden Media Queries und andere At-Rules unterstützt?
Ja, Regeln innerhalb von @media, @supports und ähnlichen Blöcken werden verschachtelt und eingerückt. Anweisungen wie @import bleiben in einer Zeile, wobei url()-Werte in Anführungszeichen gesetzt werden.
Was passiert bei ungültigem CSS?
Wenn der Parser das Stylesheet nicht lesen kann, zum Beispiel weil eine geschweifte Klammer fehlt, stoppt das Werkzeug und zeigt die Parsermeldung mit der Zeilennummer an. Behebe die gemeldete Stelle und formatiere erneut.
Bleiben Kommentare erhalten?
Ja, Kommentare bleiben erhalten, sowohl zwischen Regeln als auch zwischen Deklarationen. Jeder Kommentar wird in einer eigenen Zeile auf der Einrückungsebene des umgebenden Codes platziert.
Werden benutzerdefinierte Eigenschaften unterstützt?
Ja, benutzerdefinierte Eigenschaften wie --brand-color werden wie jede andere Deklaration formatiert. Verweise wie var(--brand-color) bleiben wie geschrieben.
Kann ich hier SCSS oder Less formatieren?
Nein, diese Seite erwartet reines CSS. Verschachtelte Regeln oder Variablen aus Präprozessoren werden möglicherweise abgelehnt. Verwende für diese Dateien den SCSS-Formatter oder den Less-Formatter.
Kann ich Einrückung oder Klammerstil ändern?
Nein, der Formatter hat keine Optionen und verwendet immer zwei Leerzeichen. Die öffnende Klammer steht dabei in der Selektorzeile. So sehen die Ergebnisse für alle Stylesheets einheitlich aus.
Warum ist das Ergebnis von einem css-Codeblock umschlossen?
Die Ausgabe wird als Markdown-Codeblock mit der Kennzeichnung css zurückgegeben und in Markdown mit Syntaxhervorhebung dargestellt. Kopiere die Zeilen zwischen den Begrenzungen in deine .css-Datei.
Wie groß darf mein Stylesheet sein?
Bis zu 5 MB pro Durchlauf. Größere Eingaben werden mit einer Meldung abgelehnt. Die Ausgabe entspricht der Option CSS des Code-Formatters.