CSS formatieren

Was ein CSS Formatter macht

Ein CSS Formatter nimmt ein Stylesheet und schreibt sein Layout neu, ohne seine Bedeutung zu ändern. Jede Regel bekommt ihren eigenen Block, jede Deklaration ihre eigene Zeile, und verschachtelte Blöcke wie Media Queries werden eine Ebene tiefer eingerückt. Das Ergebnis ist dasselbe CSS, nur leichter zu lesen, zu prüfen und zu bearbeiten.

Das ist praktisch, wenn du Styles aus einer minifizierten Datei kopierst, ein über Jahre von Hand gewachsenes Theme öffnest oder CSS aus den Entwicklertools des Browsers einfügst. Es hilft auch vor einem Code-Review, weil einheitliche Formatierung dafür sorgt, dass der Diff nur echte Änderungen zeigt.

So formatierst du CSS mit diesem Tool

1. Füge dein CSS in das linke Feld ein. Es wird sofort beim Einfügen formatiert.
2. Oder klicke auf Datei öffnen, um eine .css-Datei von deinem Gerät zu laden, oder auf Beispiel, um es mit Beispielcode auszuprobieren.
3. Wähl die gewünschte Einrückung: 2 Leerzeichen, 4 Leerzeichen oder Tabs.
4. Stell die Zeilenbreite ein. Lange Selektorlisten und Werte werden umbrochen, wenn sie diese Breite überschreiten.
5. Schalte Einfache Anführungszeichen ein, wenn dein Projekt 'Inter' statt "Inter" bevorzugt.
6. Klicke auf Formatieren (oder Strg+Enter), um zu verschönern, oder auf Minifizieren, um zu komprimieren.
7. Klicke auf Kopieren oder Herunterladen, um das Ergebnis zu übernehmen.

Wenn du einmal etwas formatiert hast, aktualisiert sich die Ausgabe beim Tippen. Hat das CSS einen Syntaxfehler, steht unter den Feldern, wo er ist, und In der Eingabe zeigen springt an diese Stelle.

Vorher und nachher

Hier ist ein Block minifiziertes CSS:

.card{display:flex;padding:16px 24px;border:1px solid #ddd}.card>h2,.card .title{font-size:1.25rem;margin:0 0 8px}@media (max-width:600px){.card{flex-direction:column}}

Nach Formatieren mit 2 Leerzeichen:

.card {
  display: flex;
  padding: 16px 24px;
  border: 1px solid #ddd;
}
.card > h2,
.card .title {
  font-size: 1.25rem;
  margin: 0 0 8px;
}
@media (max-width: 600px) {
  .card {
    flex-direction: column;
  }
}

Der Kindkombinator > bekommt auf jeder Seite ein Leerzeichen, jeder Selektor der Liste steht in einer eigenen Zeile, und die Regel in der Media Query ist eingerückt. Kommentare bleiben dort, wo du sie geschrieben hast.

CSS minifizieren

Minifizieren geht den umgekehrten Weg. Es entfernt Kommentare und den Leerraum, den Browser nicht brauchen. Auf den formatierten Code oben angewendet, kommt wieder eine Zeile heraus:

.card{display:flex;padding:16px 24px;border:1px solid #ddd}.card>h2,.card .title{font-size:1.25rem;margin:0 0 8px}@media (max-width:600px){.card{flex-direction:column}}

Der Minifier geht bewusst vorsichtig vor. Er behält das Leerzeichen in div :first-child, weil das Entfernen den Selektor ändern würde. Er behält die Leerzeichen in calc(100% - 2rem), weil calc sie braucht. Strings und url()-Werte lässt er in Ruhe. Kommentare, die mit /*! beginnen, bleiben erhalten, weil sie meist eine Lizenz enthalten:

/*! Theme v2 | MIT */ .btn{padding:8px 12px;color:#fff}

Er fasst keine doppelten Regeln zusammen, kürzt keine Farben und entfernt keine ungenutzten Selektoren. Für diese Stufe der Optimierung nimmst du in deinem Projekt ein Build-Tool wie cssnano oder Lightning CSS.

Fehlermeldungen lesen

Der Formatter braucht gültiges CSS. Fehlt eine Klammer, bekommst du eine Meldung wie diese (der Meldungstext stammt vom Parser und bleibt Englisch, Zeile und Spalte stehen auf Deutsch davor):

Zeile 1, Spalte 1: Unclosed block

Die Position zeigt auf den Block, der geöffnet, aber nie geschlossen wurde. Häufige Ursachen sind eine fehlende } am Ende einer Regel, eine verirrte { nach einem Selektor oder ein nicht geschlossener Kommentar. Behebe das Problem und klicke erneut auf Formatieren.

Das Tool prüft nicht, ob Eigenschaftsnamen oder Werte existieren. colr: red ist gültige Syntax, wird also formatiert und nicht markiert. Einen solchen Fehler findet ein Linter wie Stylelint.

Tipps

• Nimm 2 Leerzeichen, wenn dein Projekt nicht schon etwas anderes nutzt. Das ist die häufigste Wahl in CSS-Styleguides.
• Behandle die minifizierte Datei als Build-Ergebnis und die formatierte Datei als Quelle. Minifiziertes CSS von Hand zu bearbeiten ist fehleranfällig.
• Wenn das CSS in einer HTML-Datei in einem style-Tag steht, füge die ganze Seite in den HTML Formatter ein. Er formatiert das eingebettete CSS mit.
• Sass-Dateien mit Verschachtelung und $variables gehören in den SCSS Formatter.

Andere Wege, CSS zu formatieren

• VS Code: Öffne die Datei und führe Dokument formatieren aus (Umschalt+Alt+F unter Windows, Umschalt+Option+F unter macOS). Installiere die Prettier-Erweiterung, um dasselbe Ergebnis wie auf dieser Seite zu bekommen.
• Kommandozeile: npx prettier --write styles.css formatiert eine Datei direkt mit Prettier.
• Entwicklertools im Browser: Der Bereich Quellen in Chrome und Firefox hat einen Button zum hübschen Ausgeben minifizierter Stylesheets. Zum Lesen reicht das, Einstellungen wie die Einrückung kannst du dort aber nicht wählen.

Diese Seite ist praktisch, wenn du nichts installieren willst oder schnell Code von woanders prüfen musst. Wenn du auch mit Skripten arbeitest: Der JavaScript Formatter nutzt dieselbe Engine und dieselben Optionen.