CSS formatieren und einrücken: Beautify oder Minify

Fügen Sie CSS als Text ein, wählen Sie Beautify oder minify und legen Sie für nicht leere Eingaben eine Einrückung zwischen 0 und 8 fest. Ein leeres oder nur aus Leerraum bestehendes Feld erzeugt ein leeres Ergebnis, während andere Eingaben von den geltenden Verarbeitungsbedingungen abhängen.

Wofür sich die CSS-Formatierung eignet

Mit dem CSS-Formatter bringen Sie Stylesheet-Code in eine besser lesbare Form oder verdichten ihn für eine kompakte Darstellung. Dafür stehen ein Beautify-Modus und der Modus minify zur Verfügung, außerdem lässt sich die Einrückung für nicht leere Eingaben festlegen.

Beautify ordnet Regeln und Deklarationen übersichtlich an, während minify bestimmte Kommentare und überflüssige Abstände entfernt. Die Ausgabe zeigt, wie der eingegebene Text verarbeitet wurde, ersetzt aber keine Prüfung auf gültige CSS-Syntax oder auf die fachliche Wirkung des Stylesheets.

Das Werkzeug eignet sich deshalb besonders, wenn kompakter Code vor einer Überarbeitung lesbarer werden soll oder wenn bereits formatiertes CSS in eine platzsparendere Darstellung überführt werden muss. Prüfen Sie den erzeugten Text anschließend in Ihrem eigenen Arbeitsablauf, insbesondere bei wichtigem oder umfangreichem CSS.

CSS in fünf Schritten bearbeiten

1. Fügen Sie den Stylesheet-Inhalt als Text in das Eingabefeld ein. Ein Objekt oder ein anderer Datentyp ist keine passende Eingabe; ein leeres Feld ist dagegen zulässig. Falls die primäre Eingabe nicht befüllt ist, kann ein zusätzlich übergebener CSS-Wert verwendet werden, sofern dieser einen Inhalt enthält.

2. Legen Sie die Einrückung fest, wenn Sie nicht leeren CSS-Code bearbeiten. Werte von 0 bis 8 werden als zulässiger Bereich behandelt. Eine Angabe, die sich nicht in eine Zahl umwandeln lässt, sowie ein Wert außerhalb dieses Bereichs wird auf 2 zurückgesetzt. Mit 2 erhalten Sie daher eine verlässliche Ausgangswahl für die Darstellung.

3. Bestimmen Sie den gewünschten Modus. Eine fehlende oder unwirksame Angabe führt bei nicht leerem Inhalt zu Beautify. Für eine strukturierte Ansicht wählen Sie Beautify; für eine verdichtete Ausgabe verwenden Sie minify. Dieser Modus entfernt Blockkommentare, fasst Leerraum zusammen und reduziert um geschweifte Klammern, Semikolons und Doppelpunkte herum vorhandene Abstände. Andere erfolgreich verarbeitete Moduswerte werden wie Beautify behandelt.

4. Starten Sie die Verarbeitung und sehen Sie sich den ausgegebenen Text an. Bei einer Eingabe, die nicht nur aus Leerraum besteht, darf der Inhalt höchstens 1.000.000 UTF-8-Byte umfassen. Teilen Sie einen größeren Stylesheet-Text bei Bedarf in kleinere Abschnitte, bevor Sie ihn erneut eingeben.

5. Vergleichen Sie die Darstellung mit Ihrer Absicht. Wenn Sie lesbaren Code benötigen, achten Sie auf die Zeilenumbrüche und die gewählte Einrückung. Wenn Sie eine kompakte Fassung wollten, kontrollieren Sie besonders Kommentare und Abstände, die der Modus minify verändert.

Was die Ausgabe aussagt

Eine erfolgreiche Beautify-Ausgabe ist typischerweise durch zusätzliche Zeilenumbrüche und eine gleichmäßige Einrückung gegliedert. Bei minify steht dagegen die kompakte Darstellung im Vordergrund, wobei Blockkommentare, zusammengefasster Leerraum und bestimmte Abstände nicht erhalten bleiben müssen.

Bei einem leeren oder ausschließlich aus Leerraum bestehenden Feld ist das Ergebnis ebenfalls leer, und die gemeldeten Ein- und Ausgabelängen betragen null. In diesem Sonderfall werden Größen-, Einrückungs- und Modusprüfungen übersprungen; deshalb lässt sich aus diesem Ergebnis nicht ableiten, wie eine nicht leere Eingabe behandelt würde.

Ein Fehler bei nicht leerem Inhalt weist nicht automatisch auf einen CSS-Syntaxfehler hin. Neben einem ungeeigneten Datentyp oder einer zu großen Eingabe kann auch eine nicht verfügbare Formatierungsabhängigkeit die Verarbeitung verhindern.

Praktisches Beispiel

Eine Entwicklerin möchte eine kompakte .card-Regel vor einer manuellen Überarbeitung lesbarer anzeigen lassen.

Geben Sie .card{color:#333;padding:1rem} ein, wählen Sie Beautify und die Einrückung 2, und starten Sie danach die Verarbeitung.

Die Ausgabe weist im Beautify-Modus Zeilenumbrüche und eine einheitliche Einrückung auf; die CSS-Deklarationen erscheinen als strukturierter Text.

Einschränkungen

• Die Verarbeitung setzt einen geeigneten Text, die Größenbedingung für nicht leere Eingaben und eine verfügbare Formatierungsabhängigkeit voraus; das Werkzeug ist keine CSS-Validierung und kein Compiler.

Häufige Fehler

• Ursache: Der übergebene Wert ist kein Text, der nicht leere Inhalt überschreitet 1.000.000 UTF-8-Byte oder die benötigte Formatierungsabhängigkeit steht nicht zur Verfügung. Korrektur: Übergeben Sie CSS als Text, kürzen oder teilen Sie einen zu großen Inhalt und starten Sie die Verarbeitung anschließend erneut.

Häufige Fragen

Was passiert bei leerem CSS?

Bei einem leeren oder nur aus Leerzeichen bestehenden Feld bleibt die Ausgabe leer, und die Ein- und Ausgabelänge wird mit null angegeben. Enthält das Feld dagegen CSS, können beispielsweise ein falscher Datentyp, eine zu große Eingabe oder eine fehlende Abhängigkeit zum Fehlschlag führen.

Welche Einrückung kann ich verwenden?

Für nicht leeren CSS-Text liegt der unterstützte Bereich zwischen 0 und 8. Eine nicht umwandelbare Angabe oder ein Wert außerhalb dieses Bereichs wird durch 2 ersetzt.

Was macht der minify-Modus?

minify entfernt Blockkommentare, verdichtet Leerraum und reduziert bestimmte Abstände rund um geschweifte Klammern, Semikolons und Doppelpunkte. Bei einer fehlenden oder unwirksamen Modusangabe wird bei nicht leerem Inhalt Beautify verwendet.