Entwickler-Werkzeug / 16

CSS-Formatierer & -Verschönerer

Formatiere, rücke ein und erweitere CSS-Regeln, Selektorenlisten und Eigenschaftsdeklarationen zu gut lesbarem Code.

CSS-Formatierer & -Verschönerer: TOEA analysiert syntaktisch CSS-Regeln, @media-Regeln und Deklarationen und vereinheitlicht Abstände bei Eigenschaften sowie die Blockeinrückung. Läuft zu 100% lokal in deinem Browser, ohne Datei-Uploads zum Server.

Kategorie: Entwicklerwerkzeuge
Ausführungen: In deinem Browser
Kosten: Kostenlos · ohne Anmeldung
Verfügbarkeit: Einsatzbereit

CSS-Formatierer & -SchönformatiererLokale Verarbeitung

Läuft vollständig in deinem Browser

Schön formatiertes CSS (Ausgabe)

body {
  font-family: system-ui,sans-serif;
  line-height: 1.5;
  color: #333;
  margin: 0;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: #f8f9fa;
}

.header a {
  color: #0066cc;
  text-decoration: none;
}

.header a:hover {
  text-decoration: underline;
}

@media (max-width:600px) {
  .header {
    flex-direction: column;
    padding: 1rem;
  }
}

Das Stylesheet anderer lesen

Eine minimierte Datei wird durch die Formatierung lesbar, aber nicht wieder identisch mit ihrer ursprünglichen Quelle: Minimierer führen Regeln zusammen und ordnen Deklarationen neu. Rechne daher mit gruppierten Selektoren und Kurzschreibweisen. Um herauszufinden, welche Regel ein Element formatiert, sind die Entwicklertools des Browsers schneller. Im Bereich „Sources“ kannst du eine minimierte Datei direkt lesbar formatieren. Wenn du zwei Versionen eines Stylesheets formatierst und im Diff-Prüfer vergleichst, siehst du, was eine Aktualisierung geändert hat.

Was die Formatierung unverändert lässt

Der Formatierer rückt ein und setzt Leerzeichen. Er sortiert jedoch keine Eigenschaften, korrigiert keine falsch geschriebenen Eigenschaftsnamen, ergänzt keine Anbieterpräfixe und entfernt keine doppelten Deklarationen. Daher bleibt auch colour: red unverändert. Folgen von Leerzeichen werden überall zusammengefasst, auch in Zeichenfolgen in Anführungszeichen. Prüfe daher content-Werte, die mehrere Leerzeichen benötigen. Wenn die Datei bereit zur Veröffentlichung ist, komprimiere sie erneut mit dem CSS-Minimierer.

So benutzt du es

Füge unformatierten oder minimierten CSS-Code ein.
Wähle Einrückung mit 2 oder 4 Leerzeichen.
Klicke auf CSS formatieren und kopiere oder lade das Ergebnis herunter.

Datenschutz & Einschränkungen

Die gesamte CSS-Formatierung läuft lokal in deinem Browser.

Häufige Fragen

Unterstützt es @media-Abfragen?

Ja, verschachtelte At-Regeln und @media-Abfragen werden mit korrekter Einrückung formatiert.

Ändert es Farbcodes oder Selektoren?

Nein, die Formatierung passt nur Leerzeichen, Einrückung und Struktur an, ohne Eigenschaftswerte zu verändern.

Kostenloses Tool · läuft in deinem browser · kein Konto nötig