Über dieses Tool

Formatiert und verschönert CSS: komprimierte oder unordentliche Regeln stehen danach mit einer Deklaration pro Zeile und einheitlichen Abständen da, damit Reviews und Diffs lesbar bleiben. Nur Leerraum ändert sich – Selektoren, Werte und Kaskade bleiben gleich.

So nutzen Sie es

Minifiziertes oder einzeiliges CSS einfügen, Formatieren ausführen und das Ergebnis in den Editor zurückkopieren. Für den umgekehrten Weg steht der Minifierer bereit.

Beispiel

Das Beispiel beginnt als minifizierte Karte und erhält seine Einrückung zurück.

Eingabe

.card{display:flex;padding:1.5rem;border-radius:.5rem;background:#fff}.card h2{font-size:1.25rem;font-weight:600;margin:0 0 .5rem}

Ausgabe

.card {
  display: flex;
  padding: 1.5rem;
  border-radius: .5rem;
  background: #fff;
}

.card h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 .5rem;
}

Tipp

Vor dem Review formatieren, minifizieren erst beim Produktions-Build.

Gut zu wissen

Ist ein CSS-Beautifier etwas anderes als ein CSS-Formatierer?

Nein. Beides ist dieselbe Operation — Regeln neu einrücken und eine Deklaration pro Zeile setzen — daher deckt diese Seite beides ab.

Verändert das Formatieren das Verhalten meines CSS?

Nein. Nur Leerraum und Zeilenumbrüche ändern sich, die Kaskade bleibt identisch. Strings und url(data:…)-Werte sind geschützt, ein Semikolon darin trennt nie eine Deklaration.