CSS-Formatierer und -Minifier

So formatieren oder minifizieren Sie CSS

1. Fügen Sie Ihr Stylesheet ein oder klicken Sie auf Datei öffnen, um eine .css-Datei zu laden (bis 10 MB).
2. Wählen Sie die Einrückung (2 Leerzeichen, 4 Leerzeichen oder Tabulator) und ob Sie eine Leerzeile zwischen Regeln möchten.
3. Klicken Sie auf Formatieren (verschönern) für gut lesbaren Code oder auf Minifizieren für die kleinstmögliche Fassung.
4. Lassen Sie beim Minifizieren Regeln beim Minifizieren zusammenführen aktiviert, um das beste Ergebnis zu erzielen, und /*! Kommentare */ behalten aktiviert, damit Lizenzhinweise erhalten bleiben.
5. Kopieren Sie das Ergebnis oder laden Sie es herunter. Die Statuszeile zeigt die Größe vorher und nachher in Byte sowie die prozentuale Ersparnis.

Fehlt eine Klammer, bricht das Tool ab und nennt die Zeile mit der nicht geschlossenen { oder der überzähligen }, statt fehlerhaften Code auszugeben.

Formatieren: lesbares, einheitliches CSS

Formatieren (verschönern) nutzt js-beautify, den Formatierer, der auch in vielen Code-Editoren steckt. Er setzt jede Deklaration in eine eigene Zeile, rückt den Inhalt jeder Regel und von At-Regeln wie @media und @supports ein, schreibt jeden Selektor einer Gruppe in eine eigene Zeile und fügt nach dem Doppelpunkt jeder Deklaration ein Leerzeichen ein. Vorhandene Leerzeilen bleiben erhalten (höchstens eine hintereinander), sodass die logischen Abschnitte Ihrer Datei sichtbar bleiben. Werte, die Reihenfolge der Regeln und die Bedeutung von Selektoren ändert der Formatierer nie: Er ändert nur Leerraum.

Das hilft, minifiziertes CSS einer Website zu lesen, ein von einem Tool erzeugtes Stylesheet zu prüfen oder eine Datei aufzuräumen, an der mehrere Personen mit unterschiedlichen Gewohnheiten gearbeitet haben.

Minifizieren: kleineres CSS mit csso

Minifizieren nutzt csso (CSS Optimizer), einen strukturellen Minifier. Er entfernt nicht nur Leerraum und Kommentare, sondern schreibt das Stylesheet in eine gleichwertige, kürzere Form um:

• Farben werden verkürzt (#ff0000 wird zu red, #ffffff zu #fff);
• Einheiten und Nullen werden vereinfacht (0px wird zu 0, 0.5em zu .5em);
• doppelte Deklarationen werden entfernt und Kurzschreibweisen zusammengefasst, wenn das gefahrlos möglich ist;
• mit Regeln beim Minifizieren zusammenführen werden Regeln mit identischen Deklarationen gruppiert (a{color:red} b{color:red} wird zu a,b{color:red}) und überschriebene Deklarationen entfernt.

Die Umstrukturierung ist bei normalen Stylesheets unbedenklich, verschiebt aber Deklarationen. Hängt Ihr CSS von einer ganz bestimmten Kaskadenreihenfolge ab, etwa bei Browser-Hacks, deaktivieren Sie die Option: csso komprimiert dann jede Regel nur an Ort und Stelle.

Kommentare werden entfernt, außer „wichtigen“ Kommentaren, die mit /*! beginnen und oft für Lizenzen verwendet werden. Deaktivieren Sie /*! Kommentare */ behalten, um auch diese zu entfernen.

Größe vorher und nachher

Die Statuszeile vergleicht die Größe von Eingabe und Ergebnis in UTF-8-Byte. Formatierter Code ist meist größer als das Original; minifiziertes CSS spart bei handgeschriebenen Stylesheets typischerweise 20 bis 50 %. Bedenken Sie, dass Server Dateien zusätzlich mit gzip oder Brotli komprimieren, die Ersparnis bei der Übertragung ist also kleiner als der reine Wert. Minifizieren verkürzt aber trotzdem die Parse-Zeit und verkleinert zwischengespeicherte Dateien.