CSS Minifier & Beautifier
CSS für Produktion komprimieren oder für Lesbarkeit schön formatieren (100% Client-seitig)
CSS-Minimierer & Formatierer Dokumentation
Was ist dieses Tool?
CSS-Minifizierung entfernt syntaktisch unnötige Zeichen aus Stylesheets ohne Verhaltensänderung: Leerzeichen zwischen Regeln, Zeilenumbrüche, CSS-Kommentare (/* ... */), redundante Semikolons vor schließenden Klammern. Der Beautifier reformatiert mit konsistenter Einrückung und Zeilenumbrüchen.
Hauptfunktionen
- Leerzeichen- und Kommentarentfernung: alle Leerzeichen zwischen Regeln, Zeilenumbrüche und /* */-Kommentare werden entfernt. String-Literale und url()-Werte werden bewahrt. /*! ... */-Lizenzkommentare bleiben optional erhalten.
- Selektor- und Deklarationskomprimierung: mehrfache Leerzeichen in Selektoren werden zusammengefasst, letztes Semikolon vor } wird entfernt, 0px→0 und 0.5→.5 werden normalisiert.
- Konfigurierbare Einrückung: 2 Leerzeichen, 4 Leerzeichen oder Tabulator; eine Regel pro Zeile; @media, @keyframes, verschachtelte Selektoren werden beibehalten.
- CSS Custom Property-Unterstützung: var()-Ausdrücke und calc()-Leerzeichen werden nicht komprimiert (könnte in einigen Browsern das Parsing brechen).
- Dateigrößen-Delta-Anzeige: Original-Bytes, minifizierte Bytes und Kompressionsrate neben der Ausgabe.
Häufige Anwendungsfälle
- Produktions-Build-Pipeline: Integration in Webpack (css-minimizer-webpack-plugin), Vite (Lightning CSS integriert) oder Gulp (gulp-clean-css).
- Debugging minifizierter Drittanbieter-CSS: Bootstrap 5 bootstrap.min.css oder Tailwind-Ausgabe beautifizieren.
- Legacy-Stylesheet-Bereinigung: CSS mit inkonsistenter Einrückung vor dem Refactoring reformatieren.
- CDN-Payload-Reduzierung: minifiziertes CSS reduziert Transferbytes und verbessert LCP; typisch 20-50% Reduzierung.
Wie dieses Tool CSS verarbeitet
Leerzeichen entfernen
Entfernt alle unnötigen Leerzeichen, Zeilenumbrüche und Tabulatoren. CSS-Regeln werden auf eine Zeile komprimiert, ohne die Funktionalität zu beeinträchtigen. Beispiel: `.btn { color: red; }` wird zu `.btn{color:red;}`
Kommentare entfernen
Löscht alle CSS-Kommentare (/* ... */), es sei denn, die Option 'Kommentare bewahren' ist aktiviert. Wichtige Lizenzkommentare mit /*! ... */ Syntax werden von den meisten Minifizierern normalerweise bewahrt.
Redundante Zeichen entfernen
Eliminiert unnötige Semikolons (letzte Eigenschaft in einer Regel), Leerzeichen um Operatoren und überflüssige Nullen (0.5 → .5). Verkürzt Farbcodes (#ffffff → #fff).
Eigenschaften optimieren
Entfernt Leerzeichen um Klammern, Doppelpunkte und Kommas. Beispiel: `margin: 10px 20px;` wird zu `margin:10px 20px;`. Hinweis: Leerzeichen werden in calc() und anderen Funktionen bewahrt, wo sie erforderlich sind.
Auswirkung auf die Dateigröße
20-50% Reduzierung für handgeschriebenes CSS. 5-15% für Framework-Ausgaben. 40-60% für kommentarreiche Dateien. Gzip zusätzlich: 70-80% Transfer-Reduzierung.
| Szenario | Original | Minimiert | Reduzierung | Gzipped |
|---|---|---|---|---|
| Gut formatiertes CSS mit Kommentaren | 50 KB | 25-30 KB | 40-50% | ~5-8 KB (85-90% gesamt) |
| Bereits kompaktes CSS mit wenigen Kommentaren | 30 KB | 24-27 KB | 10-20% | ~4-6 KB (80-85% gesamt) |
| Stark kommentiertes Dokumentations-CSS | 100 KB | 40-50 KB | 50-60% | ~8-12 KB (88-92% gesamt) |
Verwandte Tools
HTML-Minifier & Verschönerer
Komprimieren oder verschönern Sie HTML-Code, entfernen Sie Leerzeichen und Kommentare zur Optimierung der Dateigröße oder formatieren Sie Code für bessere Lesbarkeit
JavaScript-Minifier & Verschönerer
Komprimieren oder verschönern Sie JavaScript-Code, entfernen Sie Leerzeichen und Kommentare zur Optimierung der Dateigröße oder formatieren Sie Code für bessere Lesbarkeit
Farbwähler & Konverter
Konvertieren Sie Farben zwischen HEX, RGB, HSL, CMYK, YCbCr, Lab-Formaten, generieren Sie Farbpaletten und überprüfen Sie WCAG-Kontrast
Farbpaletten-Generator
Professioneller Farbpaletten-Generator mit Farbmischung, Gradient-Erstellung, Farbschemata und Export in CSS/SCSS/JSON-Formate
Bild zu Base64 Konverter
Konvertieren Sie Bilder in Base64-Kodierung mit Unterstützung für PNG, JPG, GIF, SVG, WebP-Formate, generieren Sie Data URI und CSS-Hintergründe
Text-Diff-Checker
Vergleichen Sie Unterschiede zwischen zwei Texten oder Dateien mit nebeneinander hervorgehobener Ansicht