Tokenlabor

CSS formatieren

CSS formatieren und verschönern: Der CSS Beautifier macht minimiertes CSS mit sauberer Einrückung wieder lesbar, eine Eigenschaft je Zeile, Media Queries eingerückt.

CSS-Code
Formatiertes CSS

    Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

    CSS Beautifier: so arbeitet er

    CSS formatieren hilft, wenn Sie minimierten Code aus einer Produktivseite, einen unordentlichen Stylesheet-Export oder kopierte Schnipsel wieder lesen wollen. Der CSS Beautifier setzt jede Regel und jede Eigenschaft in eine eigene Zeile, rückt verschachtelte Blöcke wie @media, @supports oder CSS-Nesting ein und schreibt nach jedem Doppelpunkt ein Leerzeichen. Fehlende Semikolons am Blockende ergänzt er, Kommentare bleiben erhalten.

    Die Einrückung wählen Sie zwischen zwei oder vier Leerzeichen und Tabulatoren. Lange Selektorlisten können Sie Zeile für Zeile ausgeben lassen, was Änderungen in der Versionsverwaltung übersichtlicher macht. Zeichenketten, url()-Angaben mit Data-URIs und Inhalte in Klammern bleiben unangetastet, damit das CSS verschönern nichts an der Bedeutung ändert. Kombinatoren wie > und + bekommen Leerzeichen, solange sie nicht in Klammern oder Attributselektoren stehen.

    So können Sie CSS lesbar machen und danach gezielt bearbeiten. Für den umgekehrten Weg vor der Veröffentlichung nutzen Sie CSS minimieren. Grenzen: Der Formatierer prüft keine Gültigkeit von Eigenschaften und Werten, sortiert nichts um und meldet nur grobe Fehler wie unausgeglichene geschweifte Klammern.

    Anleitung: CSS formatieren in 4 Schritten

    1. Das minimierte oder unordentliche CSS in das Feld „CSS-Code“ einfügen oder „Beispiel“ laden.
    2. Die Einrückung wählen: 2 Leerzeichen, 4 Leerzeichen oder Tabulator.
    3. Festlegen, ob Selektorlisten ein Selektor je Zeile oder in einer Zeile stehen und ob zwischen Regeln eine Leerzeile folgt.
    4. Das formatierte CSS kopieren.

    Typische Anwendungsfälle

    • Fremdes CSS lesen: Minimierten Code einer Website lesbar machen, um eine Regel nachzuvollziehen.
    • Code-Review vorbereiten: Selektorlisten Zeile für Zeile ausgeben, damit Änderungen im Diff klar sichtbar sind.
    • Fehlende Klammern finden: Die Meldung zu unausgeglichenen geschweiften Klammern nutzen, um defekte Media Queries zu reparieren.
    Fragen

    Häufige Fragen

    Verändert das Formatieren die Wirkung meines CSS?

    Nein. Es werden nur Leerzeichen, Zeilenumbrüche und fehlende Semikolons am Blockende ergänzt. Zeichenketten, url()-Werte und Kommentare bleiben unverändert.

    Kann ich minimiertes CSS von einer Website formatieren?

    Ja. Kopieren Sie den Inhalt der CSS-Datei hinein, der Formatierer baut daraus eingerückten, lesbaren Code. Variablennamen und Werte bleiben so, wie sie im minimierten Code stehen.

    Unterstützt der Formatierer CSS-Nesting?

    Ja. Verschachtelte Regeln innerhalb von Regeln werden wie Media Queries eingerückt. Auch @supports, @layer, @container und @font-face werden erkannt.

    Welche Einrückung ist üblich?

    Zwei Leerzeichen sind in vielen Projekten und Styleguides verbreitet, vier Leerzeichen und Tabulatoren ebenso. Wichtig ist vor allem, dass ein Projekt einheitlich bleibt, etwa über eine .editorconfig.

    Was bedeutet die Meldung zu Klammern?

    Die Zahl der öffnenden und schließenden geschweiften Klammern stimmt nicht überein. Häufig fehlt eine schließende Klammer am Ende einer Media Query. Das Ergebnis wird trotzdem ausgegeben, damit Sie die Stelle finden.

    Wie formatiere ich CSS in VS Code?

    VS Code bringt einen Formatierer für CSS mit: Datei öffnen und „Dokument formatieren“ wählen, unter Windows mit Umschalt+Alt+F. Ohne Editor erledigt das dieses Werkzeug im Browser.

    Sortiert der CSS Beautifier Eigenschaften alphabetisch?

    Nein. Reihenfolge von Regeln und Eigenschaften bleibt unverändert, weil sie in CSS die Wirkung bestimmen kann. Geändert werden nur Leerzeichen, Zeilenumbrüche und fehlende Semikolons am Blockende.

    Weitere Werkzeuge

    Das könnte auch helfen

    Alle 358 Werkzeuge

    Farbumwandler

    HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.

    Öffnen

    Farbpalette aus Bild

    Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.

    Öffnen

    Kontrast prüfen (WCAG)

    Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.

    Öffnen

    CSS-Gradient-Generator

    Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.

    Öffnen

    Box-Shadow-Generator

    CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.

    Öffnen

    Flexbox-Generator

    Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.

    Öffnen