CSS-Minifierer
Minifiziert CSS im Browser.
Über dieses Tool
Der Minifierer entfernt Kommentare und unnötigen Leerraum, damit das ausgelieferte CSS kleiner wird. Für schnelle Kontrollen gedacht, im Produktions-Build übernimmt das ohnehin der Bundler.
So nutzen Sie es
Lesbares CSS einfügen, Minifizieren starten und die Bytegröße vorher und nachher vergleichen. Das echte Release-Artefakt liefert weiterhin die Build-Pipeline. So sieht man den Unterschied, bevor er im Netzwerk-Tab landet.
Beispiel
Im Beispiel steckt ein Kommentar, den die Minifizierung entfernt.
Eingabe
.hero {
/* homepage band */
padding: 4rem 1.5rem;
background: #0f172a;
color: #e2e8f0;
}Ausgabe
.hero{padding:4rem 1.5rem;background:#0f172a;color:#e2e8f0}Tipp
Die minifizierte Fassung darf nie die einzige Quelle sein, das formatierte Original bleibt im Repository.
Gut zu wissen
Wie viel kleiner wird mein CSS?
Das hängt von Leerraum und Kommentaren in der Quelle ab — stark kommentiertes, eingerücktes CSS schrumpft am meisten. Das Tool entfernt nur Leerraum und Kommentare; ein Build-Minifier kann auch Regeln zusammenführen und kürzen, nutzen Sie ihn für das Release.
Kann Minifizieren meine Styles kaputt machen?
Leerzeichen bei Nachfahren-Selektoren wie „nav :first-child“ bleiben erhalten, weil ihr Entfernen die Bedeutung ändern würde. Kommentare werden entfernt, auch Lizenz-Banner.