CSS Minifier — CSS-Minifizierer

Was der CSS-Minifizierer macht

Dieses Tool verkleinert Stylesheets mit CSSO (CSS Optimizer), einem Minifizierer, der CSS versteht, statt es als reinen Text zu behandeln. Im ersten Durchlauf führt er sichere Bereinigungen durch: Leerzeichen und Kommentare werden entfernt, Farben verkürzt (#ff0000 wird zu red, #ffffff wird zu #fff), Nullwerte verlieren ihre Einheit, überflüssige Anführungszeichen und Semikolons verschwinden und Zahlen werden in ihrer kürzesten Form geschrieben. Das Ergebnis ist exakt gleichwertiges CSS, das spürbar kleiner ist.

Ist restructure (Umstrukturierung) aktiviert, geht CSSO noch weiter und optimiert die Struktur des Stylesheets. Regeln mit demselben Selektor werden zusammengeführt, Selektoren mit identischen Deklarationen gruppiert, Eigenschaften, die später in derselben Regel überschrieben werden, entfernt, und ausgeschriebene Deklarationen wie einzelne Margins können zu einer Kurzschreibweise zusammengefasst werden. Dabei achtet CSSO sorgfältig auf die Kaskade: Regeln werden nur verschoben oder zusammengeführt, wenn sich dadurch nicht ändern kann, welche Deklaration gewinnt.

Die Ergebnisse lesen

Die Badges zeigen die UTF-8-Größe von Eingabe und Ausgabe sowie die prozentuale Ersparnis. Handgeschriebenes CSS mit Kommentaren und Einrückung schrumpft oft um 20–50 %. Bereits kompakte Framework-Ausgaben gewinnen weniger, während Stylesheets, die dieselben Deklarationen über viele Selektoren hinweg wiederholen, am stärksten von der Umstrukturierung profitieren. Server wenden meist zusätzlich gzip oder Brotli an – Minifizierung und Komprimierung ergänzen sich also, statt miteinander zu konkurrieren.

Privat und sicher

Der Minifizierer läuft vollständig in deinem Browser – nichts wird hochgeladen, protokolliert oder gespeichert. Das macht ihn praktisch für Inline-Critical-CSS, E-Mail-Vorlagen, eingebettete Widgets oder schnelle Korrekturen auf einem Rechner ohne deine gewohnten Build-Tools. Behalte /*! ... */-Kommentare bei, wenn dein Stylesheet Lizenzen von Drittanbietern enthält, die erhalten bleiben müssen. Für Produktivseiten solltest du einen Minifizierer in deinen Build einbinden, damit jedes Deployment automatisch optimiert wird, und die Ausgabe immer visuell prüfen, wenn dein CSS auf Browser-Hacks oder ungewöhnliche Syntax setzt.