CSS Minifier
Verkleinern Sie ein Stylesheet, indem Sie Kommentare und Leerraum entfernen, ohne eine einzige Regel zu beschädigen.
CSS online minifizieren
Jedes Byte CSS muss heruntergeladen und geparst werden, bevor der Browser die Seite darstellen kann, deshalb lohnt es sich, Stylesheets klein zu halten. Minifizieren entfernt alles, was der Browser nicht braucht: Kommentare, Einrückung und optionalen Leerraum. Diese Seite ist der Code Formatter, eingestellt auf CSS, mit einem bereits minifizierten Beispiel.
Was bleibt und was verschwindet
| Vorher | Nachher |
|---|---|
.card { margin : 0 auto ; } | .card{margin:0 auto} |
width: calc(100% - 32px); | width:calc(100% - 32px) |
a > b | a>b |
/* comment */ | entfernt |
Das Leerzeichen in calc() muss bleiben, denn 100%-32px ist ungültiges CSS. Dasselbe gilt für das Leerzeichen in 0 auto, das zwei Werte trennt.
Minifizieren, komprimieren oder beides?
Minifizieren und Komprimierung auf dem Server ergänzen sich. Gzip oder Brotli auf dem Server machen eine CSS-Datei typischerweise 70 bis 80 % kleiner, und vorheriges Minifizieren spart noch etwas mehr. Wenn Ihr Build-Tool bereits minifiziert, brauchen Sie diese Seite für die Produktion nicht; sie ist für Schnipsel, die am Build vorbeigehen: Inline-Styles in E-Mails, kritisches CSS im head oder ein Stylesheet auf einer Website ohne Build-Schritt.
Verwandte Tools
Um Regeln zu entfernen, die eine Seite nie verwendet, was weit mehr spart als Minifizieren, nutzen Sie Unbenutztes CSS entfernen. Für die Skripte neben dem Stylesheet nutzen Sie den JavaScript Minifier.