CSS Beautifier — am besten für flaches CSS, nicht für verschachtelte Media Queries

Einleitung

Minifiziertes oder von Hand zusammengestrichenes CSS lädt ein Browser schnell herunter, ein Mensch liest es aber nur schwer — alles läuft ineinander, ohne Zeilenumbrüche, ohne Einrückung und meist ohne Kommentare. Formatierening macht das Gegenteil des Minifizierens: Es nimmt CSS in diesem gestauchten Zustand und baut Zeilenumbrüche, Abstände und Einrückung wieder auf, die es lesbar machen — ohne zu ändern, was eine Regel bewirkt. Das zählt immer dann, wenn ein Mensch und nicht ein Browser das CSS tatsächlich ansehen muss: um daraus zu lernen, es zu prüfen oder eine bestimmte Regel darin zu finden.

Wie dieses Werkzeug Ihr CSS formatiert

CSS einfügen und auf Formatieren klicken baut den Code als eine Regel je Block neu auf: jeder Selektor in einer eigenen Zeile, darunter eingerückt seine Eigenschaften, eine je Zeile. Die Eigenschaftswerte selbst — Farben, Einheiten, Kurzschreibweisen — bleiben genau so, wie Sie sie eingefügt haben; nur Abstände und Struktur ändern sich. Zwei Einzelheiten dazu, wie Selektoren und Werte behandelt werden, sollten Sie kennen:

• Gruppierte Selektoren bleiben zusammen. Eine Regel mit mehreren durch Kommas getrennten Selektoren, etwa .card, .card-highlight, .card-featured { ... }, bleibt als eine Selektorzeile erhalten, statt wie bei manchen Formatierern auf je eine Zeile aufgeteilt zu werden.
• Werte mit einem Doppelpunkt werden richtig behandelt. Nur der erste Doppelpunkt einer Deklaration gilt als Trennung zwischen Eigenschaft und Wert. So wird ein Wert, der selbst einen Doppelpunkt enthält — am häufigsten eine Webadresse wie background: url(http://example.com/img.png) —, nicht an der falschen Stelle abgeschnitten.

Kommentare werden dabei entfernt, was wichtig ist, falls Ihr Stylesheet einen Lizenz- oder Urhebervermerk enthält — siehe den Hinweis weiter unten.

Was Sie vor der Nutzung wissen sollten

Dieses Werkzeug arbeitet gut mit geradlinigem, flachem CSS — einer schlichten Liste von Selektoren und ihren Eigenschaften. Zwei bestimmte Grenzen sollten Sie kennen, bevor Sie echten Code einfügen:

• Verschachtelte Regeln werden nicht richtig formatiert. Enthält Ihr CSS eine @media-Abfrage, einen @keyframes-Block oder überhaupt eine in einem anderen Block verschachtelte Regel, kommt der Abschnitt darum herum vermutlich verwürfelt heraus statt sauber eingerückt. Dieses Werkzeug baut die Struktur auf, indem es öffnende und schließende geschweifte Klammern paarweise abgleicht, und verfolgt dabei nicht, wie tief eine Klammer in einem anderen Block sitzt — eine in @media verschachtelte Regel bekommt ihren Inhalt deshalb mit dem @media-Block selbst vermischt, statt richtig verschachtelt zu bleiben. Nutzt Ihr Stylesheet Media Queries oder Keyframes, prüfen Sie diesen Abschnitt der Ausgabe sorgfältig oder beautifyen Sie eine Fassung ohne die verschachtelten Teile.
• Alle Kommentare werden entfernt, ausnahmslos. Anders als CSS Minifier auf dieser Seite, das als Lizenz- oder Urhebervermerk geschriebene Kommentare behält, streicht dieser Beautifier jeden Kommentar im eingefügten Code. Enthält Ihr Stylesheet einen Lizenzkopf, den Sie behalten müssen, sichern Sie vorher eine Kopie davon.

Keine dieser beiden Grenzen ändert etwas daran, was das CSS tut — die zugrunde liegenden Regeln und Werte bleiben unangetastet; es geht allein darum, wie viel von der Struktur richtig in lesbare Form gebracht wird.

Wann dieses Werkzeug das richtige ist

• Fremdes, minifiziertes CSS lesen, um daraus zu lernen. Das Stylesheet einer echten Seite über die Entwicklerwerkzeuge des Browsers anzusehen, zeigt oft gestauchtes, unlesbares CSS — hier eingefügt und aufbereitet lässt sich tatsächlich studieren, wie ein Layout oder eine Komponente gebaut ist. Das ist ein echter Beitrag zur Medienkompetenz und nicht bloß das Werkzeug auf eigenem Code laufen zu lassen.
• Das eingereichte CSS einer Schülerin durchsehen. Zwischen Editoren kopierter Code verliert manchmal seine ursprüngliche Formatierung; ihn vor dem Lesen aufzubereiten macht Durchsicht und Rückmeldung schneller.
• Einem Layout auf die Spur kommen, das nicht funktioniert. Dichtes, unformatiertes CSS lässt sich schlechter nach der Regel absuchen, die Ärger macht — erst zu formatieren macht das eigentliche Problem meist leichter sichtbar.

Stützt sich das CSS, mit dem Sie arbeiten, auf @media-Abfragen oder andere verschachtelte Blöcke und Sie brauchen verlässliche Formatierung, passt der eingebaute Formatierer eines Code-Editors besser als dieses Werkzeug — siehe die Grenze oben. Für ein flaches Stylesheet ohne verschachtelte Regeln, was einen großen Teil der Einsteigerarbeit im Webdesign abdeckt, ist dieses Werkzeug ein schneller Weg zu lesbarer Ausgabe, ganz ohne Installation.

Ein Beispiel

Eine Schülerin findet das CSS einer Vorlagenseite interessant und will verstehen, wie ein Karten-Layout aufgebaut ist. Das Live-Stylesheet ist zu einer dichten Zeile minifiziert, also fügt sie es, bevor sie es überhaupt lesen kann, hier ein und bereitet es auf. Die Regeln fallen in eine lesbare Struktur auseinander, und damit wird sichtbar, welcher Selektor welchen Teil des Layouts steuert, wie Abstände über margin und padding gesetzt sind und welche Farben sich durch den Entwurf ziehen. Enthält das kopierte Stylesheet @media-Abfragen für responsives Verhalten, braucht dieser Abschnitt anschließend einen zweiten Blick — siehe „Was Sie vor der Nutzung wissen sollten“ weiter oben.

Häufige Fragen

Ändert das Aufbereiten, was das CSS tut?

Nein. Es ändern sich nur Abstände, Zeilenumbrüche und Einrückung — Selektoren, Eigenschaften und Werte bleiben gleich.

Was passiert mit Kommentaren in meinem CSS?

Sie werden entfernt. Dieses Werkzeug behält Lizenz- oder Urhebervermerke nicht so, wie CSS Minifier es tut — sichern Sie vorher eine Kopie, wenn Sie einen behalten müssen.

Formatiert es CSS mit Media Queries richtig?

Nicht verlässlich. In @media, @keyframes oder ähnlichen Blöcken verschachtelte Regeln können verwürfelt herauskommen — prüfen Sie diesen Teil der Ausgabe, oder nehmen Sie für Stylesheets, die stark auf Verschachtelung setzen, den Formatierer eines Code-Editors.

Darf ich minifiziertes CSS aufbereiten, das ich von einer anderen Seite kopiert habe?

Ja — das ist ein verbreiteter, legitimer Weg, zu lernen, wie eine Seite gebaut ist. Achten Sie auf die Nutzungsbedingungen der Quellseite, wenn Sie den Code tatsächlich weiterverwenden und nicht bloß studieren wollen.

Wird mein Code irgendwo gespeichert?

Nein. Das eingefügte CSS wird verarbeitet, um das formatierte Ergebnis zu erzeugen, und danach nicht aufbewahrt; festgehalten wird nur, dass das Werkzeug benutzt wurde, nicht der Code selbst.

Werden gruppierte Selektoren auf einzelne Zeilen aufgeteilt?

Nein. Eine Regel mit mehreren durch Kommas getrennten Selektoren bleibt in einer Selektorzeile, so wie sie ursprünglich geschrieben wurde.

Welche verwandten Werkzeuge gibt es?

Nehmen Sie CSS Minifier, um CSS für den Produktivbetrieb wieder zusammenzustauchen, oder JavaScript Beautifier und HTML Beauty für andere Formatierungsaufgaben im Code.