CSS Formatter & Minifier

One input per line. Output is numbered to match the input order.
Pinned tools are listed in your favourites on the home page.Copies a link to this tool that carries your current input, so it opens ready to run.Gives you an iframe snippet for putting this tool on your own site.
Ctrl+Enter Run  · Ctrl+Shift+C Copy  · Esc Clear

Understand CSS Formatter & Minifier

Dieser Formatierer rückt ein Stylesheet nach Klammertiefe neu ein oder kürzt es auf den kleinsten Text, der noch parst.

How it works

Er sucht nach den drei Zeichen, die die CSS-Struktur tragen – { } und ; –, rückt je offener geschweifter Klammer eine Ebene ein und setzt jede Deklaration in eine eigene Zeile. Minify entfernt Kommentare und jedes optionale Leerzeichen: um Klammern, Doppelpunkte, Semikola und Kommata herum sowie das letzte Semikolon vor einer schließenden Klammer, da die Klammer die Deklaration ohnehin beendet. Nichts wird umsortiert, und kein Wert wird umgeschrieben.

When to use it

  • Ein minifiziertes Stylesheet lesen, das von einer laufenden Website oder aus den Entwicklerwerkzeugen stammt.
  • CSS aufräumen, das aus einem Designwerkzeug oder einem Codegenerator eingefügt wurde.
  • Eine grobe Größenangabe für ein Stylesheet erhalten, bevor Sie einen Build-Schritt einrichten.
  • Eine von Hand bearbeitete Datei vor dem Commit vereinheitlichen.

Watch out for

  • Beide Modi löschen Kommentare, auch ein Banner der Form /*! ... */, das die Lizenz einer Abhängigkeit zu behalten verlangt.
  • Ein Semikolon innerhalb eines Werts bringt das Verschönern durcheinander. url(data:image/svg+xml;base64,...) enthält eines, ein eingebettetes Data-URI erhält also mitten hinein einen Zeilenumbruch, und die Regel funktioniert nicht mehr. Minify kommt mit diesem Fall zurecht, das Verschönern nicht.
  • Das Minifizieren entfernt hier nur Leerraum. Ein echter Minifier führt außerdem doppelte Regeln zusammen und kürzt Werte (#ffffff zu #fff), die hier gemessene Größe ist also nicht die, die Ihr Build-Werkzeug erzeugt.
  • Präprozessor-Quelltexte werden allein anhand der Klammern eingerückt. SCSS-Verschachtelung sieht richtig aus, aber @mixin, & und Variablen werden ungeprüft durchgereicht.

Not the right tool for: Minifizierung für den Produktivbetrieb. cssnano oder Lightning CSS parsen das Stylesheet und nehmen Umformungen vor, die dieses Tool nicht gefahrlos vornehmen kann.

Frequently Asked Questions

Wie stark verkleinert die CSS-Minifizierung die Dateigröße?

Minifizieren entfernt typischerweise 10–30 % der CSS-Dateigröße, indem Leerraum, Kommentare und überflüssige Semikola wegfallen. Zusammen mit gzip-Komprimierung auf dem Server kann die tatsächliche Übertragungsgröße gegenüber unkomprimiertem, nicht minifiziertem CSS um 60–80 % sinken.

Kommt das mit CSS Custom Properties (Variablen) zurecht?

Ja – CSS-Variablen (--color-primary: #5C5BFE) bleiben erhalten und werden normal formatiert. Der Formatierer wertet Variablenwerte weder aus noch setzt er sie ein; er behandelt sie als undurchsichtige Zeichenkettenwerte.

Sollte ich CSS auch für die Entwicklung minifizieren?

Nein – minifizieren Sie nur für Produktions-Builds. Minifiziertes CSS ist unlesbar und macht die Fehlersuche sehr schwer. Lassen Sie Ihr Build-Werkzeug (Vite, webpack, esbuild) im Produktivbetrieb automatisch minifizieren. Halten Sie den formatierten Quelltext in der Versionsverwaltung.

How to Use CSS Formatter & Minifier

  1. Paste or type your input in the input area above.
  2. The tool processes your input automatically or click Run.
  3. Copy or download the result using the action buttons.
  4. Use Ctrl+Enter to run quickly from the keyboard.