Tools · CSS · CSS-Minifizierer & -Formatierer
CSS-Minifizierer & -Formatierer
Minifiziere oder formatiere CSS, live während du einfügst, vollständig in deinem Browser.
Füge eine Datei hinzu und starte das Tool.
Deine Datei ist bereit.
Versuch eine andere Datei, oder versuch es erneut.
Einstellungen
Passe die Einstellungen unten an. Das Ergebnis aktualisiert sich dabei.
Läuft komplett im Browser. Es wird nichts hochgeladen.
Läuft komplett im Browser. Nichts wird je auf einen Server hochgeladen.
So funktioniert es
Füge dein CSS ein, oder starte mit dem bereits vorhandenen Beispiel im Feld.
Wähle Minifizieren oder Formatieren, und eine Einrückungsgröße fürs Formatieren.
Kopiere das Ergebnis.
Häufige Fragen
Nein. Minifizieren und Formatieren laufen beide vollständig in deinem Browser.
Nein. Das ist ein echter Tokenizer, keine Whitespace-Regex - er verfolgt die Grenzen von Kommentaren, Strings und url() und kopiert deren Inhalt unverändert, Leerzeichen inklusive. content: "a b" und url("x?a=1 b=2") kommen exakt so heraus, wie du sie eingegeben hast.
Live als echte Prozentzahl angezeigt, berechnet aus der tatsächlichen Byte-Größe deiner Ein- und Ausgabe - keine feste Behauptung. Es hängt davon ab, wie viel Whitespace und wie viele Kommentare das Original enthält.
Es entsteht trotzdem ein bestmögliches Ergebnis, plus ein klarer Hinweis, dass die Klammern unausgeglichen wirkten - es wird kein Fehler geworfen und die Verarbeitung nicht verweigert.
Anleitungen
Ein genauerer Blick auf einzelne Probleme, die dieses Tool löst.
Why Minify CSS, and Why a Whitespace Regex Is the Wrong Way to Do It
Minifying CSS removes bytes a browser has to wait for before it paints anything. Doing it with a find-and-replace on whitespace is how valid CSS turns into a stylesheet the browser silently ignores.
Anleitung lesenHow to Minify CSS Without Breaking It
Paste a stylesheet, keep the mode on Minify, and copy the result. This walks through what the tool removes, the two options that keep things, and how to read the byte counts it shows.
Anleitung lesenHow to Beautify Minified CSS So You Can Debug It
A production stylesheet is one long line. Beautify mode turns it back into one declaration per line so you can find the rule that is overriding yours. It cannot bring back comments that were already removed.
Anleitung lesen
Kommentare