CSS-Minifier
Minifizieren Sie CSS mit CSSO, einschließlich struktureller Optimierung, die doppelte Regeln und Kurzschreibweisen zusammenführt, und sehen Sie die Ersparnis mit gzip.
Eingabe
Ergebnis
Das Ergebnis erscheint hier.Die meisten CSS-Minifier entfernen nur Leerraum und Kommentare. CSSO strukturiert zusätzlich um: Es führt Regeln mit identischen Deklarationen zusammen, fasst margin-top, margin-right, margin-bottom und margin-left zu einer margin-Kurzschreibweise zusammen, kürzt padding: 8px 16px 8px 16px auf 8px 16px und schreibt #ffffff als #fff und 0px als 0. Es ist die Engine hinter postcss-csso und gulp-csso. Fügen Sie ein Stylesheet ein, um zu sehen, wie viel davon der Browser tatsächlich braucht – gemessen roh und mit gzip.
So arbeitet es
- Das Stylesheet wird vor dem Minifizieren einmal geparst, und ein Syntaxfehler wird mit seiner Zeile gemeldet, weil CSSO die fehlerhafte Regel sonst kommentarlos verwerfen würde.
- Wenn Sie die Umstrukturierung ausschalten, beschränkt sich CSSO auf sichere lokale Änderungen: Leerraum, Kommentare, Farben und Zahlen.
- /*!-Kommentare bleiben für Lizenzen standardmäßig erhalten; schalten Sie das aus, um jeden Kommentar zu entfernen.
Wohin Ihre Daten gehen
Nirgendwohin. Dieses Werkzeug läuft vollständig in Ihrem Browser: Der eingefügte Text wird von der Seite verarbeitet und weder an einen Server übertragen noch protokolliert.
Dieses Tool ist kostenlos und braucht kein Konto. Die Ergebnisse existieren nur in Ihrer geöffneten Seite und werden nirgends gespeichert.
Was es kostet
Dieses Werkzeug ist kostenlos, ohne Anmeldung und ohne Punkte.
Häufige Fragen
- Ist die Umstrukturierung sicher?
- Sie ist darauf ausgelegt, das Verhalten zu erhalten: Regeln werden nur zusammengeführt oder verschoben, wenn CSSO nachweisen kann, dass die Kaskade dasselbe Ergebnis liefert. Die seltenen Ausnahmen sind Stylesheets, die auf Browser-Hacks setzen oder darauf, dass ungültige Deklarationen auf eine bestimmte Weise ignoriert werden. Wird das minifizierte CSS anders dargestellt, schalten Sie die Umstrukturierung aus und vergleichen Sie.
- Warum wurde mein CSS abgelehnt?
- Eine Deklaration wie color red ohne Doppelpunkt oder eine in einem Selektor offen gelassene Klammer ist ein Syntaxfehler. Browser überspringen solche Regeln, und CSSO täte es auch – stillschweigend. Der Abbruch mit Zeilennummer sorgt dafür, dass Sie den Fehler beheben, statt ein Stylesheet auszuliefern, dem eine Regel fehlt, die Sie für vorhanden hielten.
- Kommt es mit modernem CSS wie Nesting, @layer und @container zurecht?
- Custom Properties, @layer und @container sind kein Problem. Natives CSS-Nesting dagegen schon: Der Parser von CSSO ist älter und würde die verschachtelten Regeln wegwerfen, deshalb bricht dieses Werkzeug stattdessen mit einem Parse-Fehler ab. Lösen Sie verschachtelte Regeln vorher auf oder überlassen Sie die ganze Arbeit einem Build-Werkzeug wie Lightning CSS.
- CSSO, cssnano oder Lightning CSS?
- Bei typischen Stylesheets landen sie bei ähnlichen Größen. cssnano ist ein Paket aus PostCSS-Plugins; Lightning CSS ist in Rust geschrieben und kümmert sich auch um Vendor-Präfixe und das Herunterübersetzen neuer Syntax; die Stärke von CSSO ist das strukturelle Zusammenführen. Der Parser von CSSO hat mit neuerer Syntax wie nativem Nesting nicht Schritt gehalten, was wichtig ist, wenn Ihre Stylesheets sie verwenden.
Das Open Source dahinter
Dieses Werkzeug läuft auf css/csso, veröffentlicht unter MIT. Wer dasselbe Verhalten im eigenen Programm braucht, greift zu dieser Bibliothek.
css/cssoAuch bekannt als
- CSS Minifier
- CSS minifizieren online
- CSS komprimieren
- CSSO online
- CSS minify
- CSS verkleinern