CSS Minifier — CSS-Minifizierer
CSS mit CSSO direkt im Browser minifizieren und umstrukturieren. Größe vorher und nachher vergleichen, dann die .min.css kopieren oder herunterladen.
🔒 Läuft vollständig in Ihrem Browser — nichts wird hochgeladenWas 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.
So verwenden Sie
- CSS hinzufügenFüge ein Stylesheet ein oder ziehe eine .css-Datei in den Ablagebereich.
- Optionen wählenLege fest, ob Regeln umstrukturiert und ob /*! license */-Kommentare beibehalten werden sollen.
- MinifizierenKlicke auf Minify CSS und prüfe die Größe vorher, nachher und die prozentuale Ersparnis.
- Kopieren oder herunterladenKopiere das minifizierte CSS oder lade es als .min.css-Datei herunter.