CSS minifizieren – CSS online verkleinern oder formatieren
Verkleinere deine Stylesheets oder mach minifiziertes CSS wieder lesbar. Der Minifier entfernt Kommentare und Leerraum, ohne calc(), Strings oder Selektoren zu zerstören; der Formatierer rückt sauber ein.
CSS einfügen und Minifizieren oder Formatieren wählen. Minifizieren entfernt Kommentare (/*!-Lizenzhinweise auf Wunsch behalten), Leerraum, Leerzeichen um Klammern, Doppelpunkte und Kommas sowie das letzte Semikolon je Block und zeigt die Ersparnis. Formatieren setzt jede Deklaration eingerückt in eine eigene Zeile.
So funktioniert: CSS-Minifier und -Formatierer
- CSS einfügen.
- Minifizieren oder Formatieren wählen.
- Entscheiden, ob /*!-Lizenzkommentare bleiben.
- Größenunterschied prüfen.
- Ergebnis kopieren oder herunterladen.
Was CSS-Minifizierung entfernt
Entfernt wird alles, was der Browser ignoriert: Kommentare, Einrückungen, Zeilenumbrüche, Leerzeichen um { } : ; , > und ~ sowie das letzte Semikolon vor jeder schließenden Klammer. Die Regeln bleiben gleich, die Seite sieht identisch aus.
| Vorher | Nachher |
|---|---|
| `.card > h2 , .card + .card {` | `.card>h2,.card+.card{` |
| `margin : 0 auto ;` | `margin:0 auto;` |
| `calc( 1rem + 2vw )` | `calc(1rem + 2vw)` |
| `/ Kommentar /` | entfernt |
Sicheres Minifizieren
Manche Leerzeichen sind wichtig. In calc() sind Leerzeichen um + und − Pflicht und bleiben erhalten. Strings in Anführungszeichen, etwa content-Werte oder Schriftnamen, werden unverändert übernommen. Ein Leerzeichen vor einem Doppelpunkt im Selektor (`a :hover`) ändert die Bedeutung, daher werden nur Leerzeichen nach Doppelpunkten entfernt. Lizenzkommentare mit /*! bleiben standardmäßig stehen, weil viele Open-Source-Lizenzen sie verlangen.
Minifiziertes CSS formatieren
Eine minifizierte Datei aus Theme oder Framework soll gelesen oder bearbeitet werden? Wechsle zu Formatieren: Jede Regel beginnt in einer neuen Zeile, Deklarationen werden eingerückt, Selektorlisten aufgeteilt und Media Queries eine Ebene tiefer gesetzt.
Wie viel spart das?
Handgeschriebene Stylesheets schrumpfen meist um 15–35 %. Zusammen mit gzip oder Brotli und dem Entfernen ungenutzter Regeln lädt CSS schneller. Da CSS das Rendern blockiert, zählt jedes Kilobyte im kritischen Pfad für den Largest Contentful Paint.
Quelle behalten
Behalte das lesbare Stylesheet in der Versionsverwaltung und minifiziere beim Deployment eine Kopie.
Verwandte Tools
HTML verkleinert der HTML-Minifier, Pixel rechnest du mit PX-in-REM-Rechner um, und CSS für Schatten, Verläufe und Ecken erzeugen CSS Box-Shadow-Generator, CSS-Verlauf-Generator und Border-Radius-Generator. Alles läuft lokal im Browser.
Diese kostenlosen Tools könnten dir auch helfen: JSON formatieren, Passwort-Generator und Regex-Tester.
Häufige Fragen
Wie minifiziere ich CSS?
CSS einfügen, Minifizieren wählen und das Ergebnis kopieren.
Kann Minifizieren mein CSS kaputt machen?
Nein. Wichtige Leerzeichen wie in calc() bleiben, Strings werden nicht verändert.
Wie mache ich minifiziertes CSS lesbar?
Wechsle zu Formatieren – das Tool rückt den Code ein und bricht ihn um.
Soll ich Lizenzkommentare behalten?
Ja, bei Open-Source-Code. Kommentare mit /*! bleiben standardmäßig erhalten.
Wird mein CSS hochgeladen?
Nein. Alles wird im Browser verarbeitet.
Zuletzt aktualisiert: