Utilore

CSS formatieren

Stylesheet einfügen — auch wenn es als eine einzige Zeile ankam — und wieder lesen. Jede Deklaration bekommt ihre Zeile, verschachtelte Blöcke ihre Einrückung, Kommentare bleiben, wo sie hingehören.

Der Code verlässt diese Seite nicht — formatiert wird im Browser.

So geht es

  1. CSS in das erste Feld einfügen.
  2. Einrückung wählen: zwei Leerzeichen, vier oder Tabulator.
  3. Ergebnis kopieren oder mit «Minifizieren» wieder komprimieren.

Gut zu wissen

Warum ein naiver Formatierer Stylesheets zerstört

Bei jedem Semikolon und jeder Klammer zu trennen sieht funktionsfähig aus, bis die Datei content: "a;b" oder eine Data-URI mit SVG in url() enthält. Beides ist in echtem CSS alltäglich. Dieser Formatierer liest zeichenweise, deshalb wandern Zeichenketten und Kommentare am Stück hinüber, statt am ersten Satzzeichen zerschnitten zu werden.

Verschachtelung, die wirklich hilft

Media Queries, supports-Blöcke und moderne verschachtelte Regeln fügen je eine Ebene hinzu, und die Einrückung folgt. Eine Leerzeile trennt Regeln der obersten Ebene, sodass sich ein Stylesheet mit zweitausend Zeilen als Liste von Blöcken liest und nicht als Textwand.

Häufige Fragen

Bleiben meine Kommentare erhalten?

Ja. Ein allein stehender Kommentar bekommt seine eigene Zeile; einer hinter einer Deklaration bleibt bei ihr.

Ändert es mein CSS?

Keine Eigenschaft wird umbenannt, umsortiert oder entfernt. Nur Leerraum bewegt sich — das Stylesheet verhält sich genau wie zuvor.

Wird mein Code an einen Server geschickt?

Nein. Alles läuft im Browser, ein Stylesheet aus einem Projekt unter Geheimhaltung bleibt auf Ihrem Rechner.

Was ist mit SCSS oder LESS?

Verschachtelte Regeln und Kommentare werden sauber formatiert. Variablen, Mixins und Steueranweisungen laufen unverändert durch, statt verstanden zu werden.

Ähnliche Tools