CSS formatieren

So funktioniert es

Das Stylesheet einer fertigen Website ist meist eine .min.css-Datei in einer einzigen Zeile: 40 KB Regeln ohne sichtbaren Anfang und Ende. Fügen Sie den Code in das linke Feld ein; rechts steht danach jeder Selektor auf einer eigenen Zeile, jede Eigenschaft (color: red;) ebenfalls, und der Inhalt jedes Blocks ist in der gewählten Breite eingerückt. @media-, @supports- und @keyframes-Blöcke rücken eine Stufe weiter ein; so sehen Sie sofort, wo die Regeln für Mobilgeräte beginnen. Durch Komma getrennte Selektoren (.karte h2, .karte h3) stehen untereinander, Kommentare bleiben an ihrem Platz. Verschachtelte Regeln aus SCSS- oder LESS-Dateien werden genauso aufgeteilt; Variablen wie $hauptfarbe oder @hauptfarbe bleiben unverändert. Die Ergebniszeile nennt, wie viele Zeilen daraus wurden und wie viele Regelblöcke gefunden wurden. Mit Was soll passieren? → Minimiert geht es in die Gegenrichtung: Leerraum und Kommentare fallen weg, Farben wie #ffffff werden gekürzt, der Code steht in einer Zeile. Regeln werden dabei nicht zusammengelegt, ihre Reihenfolge bleibt.

Dieses Werkzeug ist auch als css formatieren, css formatieren online, css code formatieren, css beautifier, scss formatieren bekannt.

Was ist CSS?

CSS (Cascading Style Sheets) ist die Sprache, die Farben, Schriften, Abstände und Layout einer Webseite festlegt. Jede Regel besteht aus einem Selektor (.karte, h2, #menue) und Paaren aus Eigenschaft: Wert; in geschweiften Klammern. Browser ignorieren Leerzeichen und Zeilenumbrüche zwischen den Regeln; deshalb kann dasselbe Stylesheet sauber eingerückt oder in eine Zeile gepresst sein und die Seite trotzdem identisch gestalten.

Was ist SCSS und LESS?

SCSS und LESS sind Präprozessor-Sprachen, die CSS um Variablen, verschachtelte Regeln und wiederverwendbare Bausteine (Mixins) erweitern. Browser lesen sie nicht direkt; ein Compiler übersetzt sie zuerst in normales CSS. Weil die Schreibweise CSS sehr ähnlich ist, kann derselbe Formatierer sie einrücken: Eine verschachtelte Struktur wie .karte { h2 { ... } } rückt pro Ebene eine Stufe weiter ein.

Was ist der Unterschied zwischen CSS formatieren und minimieren?

Beides bewegt denselben Code in entgegengesetzte Richtungen. Formatieren fügt Leerzeichen und Zeilenumbrüche hinzu, damit Menschen den Code lesen können; die Datei wird größer, die Bedeutung bleibt. Minimieren entfernt Leerraum und Kommentare, kürzt Farben und Zahlen und legt im starken Modus Regeln zusammen; die Datei schrumpft und lädt schneller, ist aber kaum noch lesbar. Für den Browser ist das Ergebnis gleich — der Unterschied ist, wer die Datei lesen muss.

Verändert das Formatieren das CSS?

Nein. Im eingerückten Modus ändern sich nur Leerzeichen, Zeilenumbrüche und Einrückung; Selektoren, Eigenschaften, Werte und Kommentare bleiben Zeichen für Zeichen gleich. Browser ignorieren Leerraum in CSS, die formatierte Datei stellt die Seite also exakt gleich dar. Sie können damit gefahrlos das minimierte Stylesheet einer Live-Seite lesen, einen Fehler suchen oder eine Regel herauskopieren.

Das Werkzeug prüft nichts: Eine fehlende schließende Klammer, ein falsch geschriebener Eigenschaftsname oder ein fehlendes Semikolon wird nicht gemeldet, der Code wird einfach eingerückt. Die Einrückung verrät Fehler trotzdem: Nach einem nicht geschlossenen Block stehen alle folgenden Regeln eine Stufe zu tief.

Eingerückt oder minimiert?

Eingerücktes CSS ist für Menschen: zum Lesen, Bearbeiten und Teilen im Team. Minimiertes CSS ist für den Browser: Je kleiner die Datei auf der Live-Seite, desto früher wird die Seite gezeichnet. Üblich ist, im Projekt die eingerückte Datei zu pflegen und beim Veröffentlichen zu minimieren.

Die Option Minimiert auf dieser Seite arbeitet vorsichtig: Nur Leerraum und Kommentare entfallen, Farben und Zahlen werden gekürzt, Anzahl und Reihenfolge der Regeln bleiben. Lizenzkommentare mit /*! bleiben erhalten. Für stärkeres Minimieren mit zusammengelegten Regeln und Vorher-nachher-Vergleich in Byte nutzen Sie das Werkzeug CSS minimieren.

• Lesen, Fehler suchen, Regel kopieren → Eingerückt
• Veröffentlichen, in E-Mail einbetten → Minimiert
• SCSS/LESS-Quelldatei → Eingerückt (minimiert wird das kompilierte CSS)

Häufige Fragen

Wie mache ich minimiertes CSS wieder lesbar?

Kopieren Sie den Dateiinhalt und fügen Sie ihn links auf dieser Seite ein. Jeder Selektor und jede Eigenschaft bekommt eine eigene Zeile, jeder Block wird eingerückt. Das Ergebnis können Sie kopieren oder als .css-Datei herunterladen. Das Stylesheet einer geöffneten Website finden Sie in den Entwicklertools des Browsers im Tab Quellen.

Kann ich auch SCSS oder LESS formatieren?

Ja. Verschachtelte Regeln, Variablen und Selektoren mit & werden genauso aufgeteilt und eingerückt. Das Werkzeug kompiliert SCSS nicht und führt keine Mixins (@mixin, @include) aus; es macht nur den Aufbau lesbar.

Zeigt das Werkzeug Fehler in meinem CSS an?

Nein, es ist kein Validator; fehlerhafter Code wird so eingerückt, wie er ist. Eine offene Klammer erkennen Sie meist daran, dass die folgenden Regeln eine Stufe zu tief stehen. Das Werkzeug CSS minimieren warnt dagegen mit Zeile und Spalte vor unlesbaren Stellen.

Wird mein Code an einen Server geschickt?

Nein. Das Formatieren läuft vollständig in Ihrem Browser; der eingefügte Code verlässt diese Seite nicht und wird nirgends gespeichert.