Minifiziert CSS, indem Kommentare und überflüssige Leerzeichen entfernt und doppelte Regeln zusammengeführt werden — oder formatiert es umgekehrt wieder auf eine Deklaration pro Zeile. Beide Richtungen nutzen echte Parser (csso und js-beautify), sodass kommentarähnlicher Text in einem content:-String, Abstände in calc() und data:-URIs unverändert erhalten bleiben.
Minifizieren vs. Verschönern
Minifizieren entfernt Kommentare und unnötige Leerzeichen und führt doppelte Regeln sicher zusammen, um das kleinstmögliche CSS zu erzeugen – praktisch, um ein Stylesheet vor der Auslieferung zu verkleinern. Verschönern macht das Gegenteil: Es rückt alles neu ein, mit einer Deklaration pro Zeile, sodass eine minifizierte oder unübersichtliche Datei wieder lesbar wird. Beide nutzen echte CSS-Parser (csso und js-beautify), sodass kniffliger Inhalt wie kommentarähnlicher Text in einer content:-Zeichenkette, Leerzeichen in calc() und data:-URIs erhalten bleiben, statt durch ein naives Suchen-und-Ersetzen beschädigt zu werden.
So verwenden Sie den CSS-Minifier
- Einfügen — Fügen Sie das CSS, das Sie minifizieren oder verschönern möchten, oben in das Eingabefeld ein.
- Einrückung wählen — Wählen Sie zwischen 2 Leerzeichen, 4 Leerzeichen oder Tab (gilt nur für das Ergebnis des Verschönerns und hat keinen Einfluss auf das Minifizieren).
- Ausführen — Klicken Sie auf „Minifizieren“ oder „Verschönern“; die Verarbeitung erfolgt sofort im Browser.
- Kopieren — Prüfen Sie die Größenanzeige und legen Sie das Ergebnis mit „Kopieren“ in die Zwischenablage.
Kann Minifizieren meine Styles verändern?
Nein. Dieses Tool ersetzt nicht blind Text, sondern versteht das Stylesheet mit einem echten CSS-Parser (csso) als Syntaxbaum und optimiert es dann sicher. Deshalb bleiben kommentarähnliche Zeichenketten in content:, bedeutungstragende Leerzeichen in calc(), data:-URIs und Vendor-Präfixe erhalten, und das Rendering-Ergebnis ändert sich nicht.
Wie viel kleiner wird die Datei?
Das hängt vom Ausgangszustand ab, aber bei gut lesbarem CSS mit vielen Kommentaren und Einrückungen sind meist etwa 30–60 % Ersparnis üblich. Bei einer bereits minifizierten Datei fällt die Reduktion gering aus. Nach der Umwandlung sehen Sie sofort an der Größenanzeige, wie viele Bytes und Prozent gegenüber dem Original eingespart wurden. Bei der Übertragung an den Server sinkt die tatsächliche Datenmenge durch gzip- bzw. brotli-Kompression zusätzlich.
Wann sollte ich das Verschönern verwenden?
Das Verschönern ist nützlich, wenn Sie bereits auf eine Zeile minifiziertes CSS oder eine Datei mit unsauberer Einrückung lesen oder bearbeiten müssen. Da es jede Deklaration mit einheitlicher Einrückung in eine eigene Zeile neu anordnet, ist es praktisch, um ein ausgeliefertes Stylesheet zu debuggen oder fremden Code zu verstehen. Für die erneute Auslieferung wechseln Sie einfach wieder zu „Minifizieren“.
Wird mein CSS irgendwohin hochgeladen?
Nein. Sowohl der Minifier als auch der Beautifier laufen vollständig in Ihrem Browser mit selbst gehosteten Bibliotheken – Ihr CSS wird niemals an einen Server gesendet oder dort gespeichert. Nach der Umwandlung zeigt die Größenanzeige, wie viele Bytes das Minifizieren gespart hat, und die Schaltfläche „Kopieren“ legt das Ergebnis direkt in Ihre Zwischenablage.