Der CSS Minifier verkleinert deinen Stylesheet-Code: Er entfernt Kommentare, Zeilenumbrüche und überflüssige Leerzeichen, ohne an den eigentlichen Regeln etwas zu ändern. Das spart Bytes, die der Browser beim Laden deiner Seite überträgt – praktisch vor dem Deployment oder wenn du CSS kompakt in eine E-Mail oder ein einzelnes Snippet packen willst. Du fügst dein CSS ein, das Ergebnis erscheint sofort zusammen mit der erzielten Ersparnis in Prozent.
So funktioniert der CSS Minifier
Füge dein CSS in das Eingabefeld ein – das Ergebnis aktualisiert sich automatisch, ohne Klick auf einen Button. Das Tool entfernt dabei alle /* Kommentare */, fasst Leerzeichen, Tabs und Zeilenumbrüche zu einem einzigen Leerzeichen zusammen und löscht überflüssige Leerzeichen direkt vor oder nach { } : ; , > ~ +. Ein Semikolon unmittelbar vor einer schließenden Klammer } fällt zusätzlich weg, weil es dort überflüssig ist.
Als Ergebnis erscheinen zwei Blöcke: die Ersparnis in Prozent und Bytes sowie darunter das fertige, einzeilige CSS zum Kopieren. Bleibt das Feld leer, erscheint stattdessen der Hinweis „Bitte CSS einfügen.“
Was entfernt wird – und was nicht
Der CSS Minifier verändert deinen Code rein äußerlich: Selektoren, Eigenschaften und Werte bleiben inhaltlich exakt erhalten. Entfernt werden ausschließlich Kommentare, Zeilenumbrüche, doppelte Leerzeichen sowie unnötige Leerzeichen rund um { } : ; , > ~ + – dazu das letzte Semikolon direkt vor einer schließenden Klammer.
Nicht angefasst werden Dinge wie 0px zu 0, #ffffff zu #fff oder das Zusammenfassen doppelter Regeln – dafür bräuchte es einen vollständigen CSS-Parser statt einfacher Textregeln. Auch geprüft wird nichts: Enthält dein CSS bereits Fehler, bleiben sie nach der Minifizierung bestehen.
Beispiel
Ein eingerücktes CSS-Snippet mit zwei Regeln (.box und .button) und einem Kommentar dazwischen ist zum Beispiel 94 Bytes groß, weil Zeilenumbrüche und Einrückungen mitzählen. Der CSS Minifier entfernt den Kommentar sowie sämtliche Zeilenumbrüche und Leerzeichen und liefert .box{color:red;padding:10px 20px}.button{background:blue} – nur noch 57 Bytes. Genau das zeigt das Tool oben unter „Ersparnis“ an: 39% · 94 → 57 Bytes.
Wofür brauche ich das?
- Vor dem Deployment: Kleinere CSS-Dateien laden schneller und sparen Datenvolumen, besonders auf mobilen Verbindungen.
- Ohne Build-Tool: Läuft in deinem Projekt kein Bundler wie Vite oder Webpack, minifizierst du dein CSS trotzdem in Sekunden manuell.
- Inline-Styles: Für Style-Blöcke in HTML-E-Mails oder einzelnen Snippets, wo kompakter Code gefragt ist.
- Schnelle Kontrolle: Die Ersparnis in Prozent zeigt dir, wie viel Kommentare und Formatierung an deiner Datei tatsächlich ausmachen.