So nutzt du: CSS Minifier
- Füge dein CSS ein, ziehe eine
.css-Datei in das Eingabefeld oder klicke auf Beispiel. - Lass die Optimierungen aktiviert (alle sind sicher) oder entferne den Haken bei allen, die du nicht willst.
- Prüfe die Ersparnis unter dem Editor und klicke dann auf Kopieren oder Herunterladen, um
styles.min.csszu speichern. - Du willst stattdessen eine minifizierte Datei lesen? Wechsle zu Formatieren.
Was ist CSS-Minifizierung?
Bei der CSS-Minifizierung entfernt man alles, was der Browser nicht braucht: Kommentare, Einrückungen, Zeilenumbrüche und das letzte Semikolon in jeder Regel. Außerdem werden einige Werte in kürzere Schreibweisen umgewandelt. Das Ergebnis funktioniert genauso wie vorher, ist aber kleiner und wird dadurch schneller geladen und geparst. Da CSS renderblockierend ist, kann ein kleineres Stylesheet den First Contentful Paint und den Largest Contentful Paint direkt verbessern.
Was dieser Minifier ändert
| Optimierung | Vorher | Nachher |
|---|---|---|
| Kommentare & Leerzeichen | /* Buttons */ .btn , .link { … } | .btn,.link{…} |
| Letztes Semikolon | {color:red;} | {color:red} |
| Farben | #FFFFFF, #aabbccdd | #fff, #abcd |
| Einheiten bei null | margin:0px 0em | margin:0 0 |
| Zahlen | 0.50rem, 1.0 | .5rem, 1 |
| Leere Regeln | .unused{} | (entfernt) |
Warum das sicher ist
Aggressive Minifier zerstören manchmal Stylesheets. Dieser hier wendet nur Transformationen an, die das Verhalten nicht ändern können:
- Strings,
url()-Werte und maskierte Zeichen werden geschützt und nie verändert. - Einheiten werden nur bei Längen entfernt.
0s,0degund0%behalten ihre Einheit (transition: 0sund Keyframe-Selektoren brauchen sie). Innerhalb voncalc(),min()oderclamp()wird nichts angefasst, dacalc(0 + 10px)ungültig ist. - Die
flex-Kurzschreibweise wird übersprungen (flex: 1 1 0pxundflex: 1 1 0sind in älteren Engines nicht immer gleich). Werte eigener Properties verlieren nur überflüssige Leerzeichen. - Leerzeichen in Selektoren bleiben erhalten, wo sie etwas bedeuten:
a :hover(jedes gehoverte Kind-Element) unterscheidet sich vona:hover. @layer name {}bleibt auch dann erhalten, wenn es leer ist, weil es die Layer-Reihenfolge festlegt. Lizenzkommentare, die mit/*!beginnen, bleiben standardmäßig erhalten.
Minifizierung vs. Komprimierung
Minifizierung und gzip- bzw. Brotli-Komprimierung ergänzen sich. Die Komprimierung entfernt Wiederholungen, die Minifizierung entfernt Bytes, die die Komprimierung nicht erfassen kann, etwa Kommentare. Die Angabe Gzip-Ausgabe zeigt ungefähr, was über das Netzwerk übertragen wird, wenn dein Server Antworten komprimiert (das machen die meisten). Für den größten Effekt entferne außerdem ungenutzte Regeln mit einem Tool wie PurgeCSS und binde nur das kritische CSS für den sichtbaren Bereich inline ein.
Willst du eine minifizierte Datei prüfen? Nutze dafür den Formatieren-Modus hier oder den CSS Formatter. Willst du die Performance einer ganzen Seite prüfen? Starte einen Page-Speed-Test.
Auch gesucht als: css minifizieren, css komprimieren, css minifier online, css optimieren, css dateigröße reduzieren, css verkleinern, css compressor, css minify online.
Passende Tools zu: CSS Minifier
- HTML Formatter — Füg minifiziertes oder unübersichtliches Markup ein und erhalte sauber und einheitlich eingerücktes HTML – inklusive eingebetteter <style>- und <script>-Blöcke.
- JavaScript Formatierer — Entpacke und formatiere JavaScript, JSON oder JSX mit deiner bevorzugten Einrückung und deinem Klammerstil – oder entferne Leerzeichen und Kommentare mit einem geprüften Minifier.
- Bildkompressor — Verkleinere Fotos und Grafiken um 50–90 % ohne sichtbaren Qualitätsverlust.
- SQL Formatter — Füge eine Abfrage oder eine ganze Migration ein und erhalte lesbares SQL mit einer Klausel pro Zeile, ausgerichteten Joins und einheitlicher Schreibweise der Schlüsselwörter, passend zur Syntax deiner Datenbank.
Häufige Fragen
Kann Minifizieren mein CSS kaputt machen?
calc() entfernt). Wenn dein ursprüngliches CSS einen Syntaxfehler hat, bleibt der Fehler in der Ausgabe erhalten. Prüfe deshalb CSS, das sich seltsam verhält, mit einem Validator.Wie viel kleiner wird mein CSS?
Sollte ich trotzdem gzip oder Brotli verwenden?
Warum bleiben manche Kommentare erhalten?
/*! beginnen, enthalten üblicherweise Lizenzhinweise, die beim Code bleiben müssen. Entferne den Haken bei „/*! license */-Kommentare behalten“, wenn du auch diese löschen willst.