CSS-Minifier

So nutzt du es

1. Füg dein CSS ein, öffne eine .css-Datei oder starte mit dem Beispiel.
2. Das minifizierte CSS erscheint, während du tippst, mit der Größe vorher und nachher.
3. Kopiere es oder lade es als styles.min.css herunter.

Was es macht

Der CSS-Minifier nutzt CSSO, das mehr tut, als Leerzeichen und Kommentare zu entfernen:

• Kürzt Werte: #ff0000 wird zu red, 0px wird zu 0, und padding: 0 16px 0 16px wird zu padding: 0 16px.
• Führt Regeln mit demselben Selektor zusammen, und Selektoren mit denselben Deklarationen.
• Entfernt Deklarationen, die eine spätere in derselben Regel überschreibt.

Es nimmt nur Änderungen vor, die die Bedeutung des Stylesheets erhalten, Seiten sehen also gleich aus.

Lohnt es sich?

Stylesheets halten die Seite zurück, bis sie geladen sind, also bedeutet kleineres CSS ein schnelleres erstes Rendern. Minifizieren spart typischerweise weitere 5 bis 15 % zusätzlich zur gzip- oder Brotli-Kompression deines Hosters, mehr bei Stylesheets mit vielen Kommentaren. Nutzt du ein Build-Tool wie Vite, minifiziert es CSS für die Produktion bereits; diese Seite ist für Stylesheets, die du von Hand schreibst und auslieferst.

Häufige Fragen

Kann Minifizieren mein CSS kaputt machen?

Die Änderungen von CSSO erhalten die Bedeutung von gültigem CSS. Hacks, die für alte Browser auf ungültiger Syntax beruhen, überleben eventuell nicht. Behalte die lesbare Version als Quelle und minifiziere eine Kopie.

Entfernt es ungenutztes CSS?

Nein: Es kann nicht sehen, welche Selektoren deine Seiten verwenden. Tools wie PurgeCSS erledigen das während eines Builds.

Wie bekomme ich die lesbare Version zurück?

Behalte das Original. Der CSS-Formatter rückt minifiziertes CSS wieder ein, aber Kommentare sind endgültig weg.

Wird mein CSS hochgeladen?

Nein. Es wird in deinem Browser minifiziert.