So wird CSS kleiner
Der CSS Minifier nutzt CSSO, einen Minifier, der nicht nur Zeichen streicht, sondern das Stylesheet auch strukturell optimiert. Im ersten Schritt verschwinden Kommentare, Zeilenumbrüche, Einrückungen und das letzte Semikolon eines Blocks. Farben und Werte werden, wo möglich, kürzer geschrieben, etwa #ffffff als #fff oder 0px als 0.
Die strukturelle Optimierung ist standardmäßig aktiv. Sie führt Regeln mit identischen Selektoren zusammen, fasst Selektoren mit identischen Deklarationen zusammen und entfernt Deklarationen, die später im selben Block ohnehin überschrieben werden. Dabei wird die Reihenfolge berücksichtigt, damit die Kaskade dasselbe Ergebnis liefert. Wenn Sie eine reine Zeichenminifizierung wünschen, schalten Sie diese Option aus.
Kommentare, die mit /*! beginnen, enthalten üblicherweise Lizenzhinweise von Bibliotheken. Mit der entsprechenden Option bleiben sie erhalten, damit Sie die Lizenzbedingungen einhalten. Das Werkzeug zeigt die Größe vorher und nachher und die prozentuale Ersparnis. Fehlerhafte Syntax wird mit der Meldung des Parsers angezeigt. Wie stark ein Stylesheet schrumpft, hängt davon ab, wie es geschrieben wurde. Gut kommentierte, großzügig eingerückte Dateien und über Jahre gewachsene Stylesheets mit doppelten Regeln profitieren am meisten. Bereits durch ein Build-Tool erzeugtes CSS wird nur noch wenig kleiner. Der Minifier ändert weder Selektoren noch Klassennamen, sodass Ihr HTML und JavaScript unverändert weiter funktionieren. Auch Media Queries, @font-face, @keyframes und benutzerdefinierte Eigenschaften wie --farbe bleiben erhalten und werden nur kompakter geschrieben.
Alles läuft in Ihrem Browser, das Stylesheet wird nicht hochgeladen. Kostenlos verarbeiten Sie eine Datei oder einen eingefügten Text und können denselben Text mit anderen Optionen erneut minifizieren. Für neue Eingaben, mehrere .css-Dateien auf einmal mit ZIP-Download und ohne Werbung gibt es ToolStudio Pro, jederzeit kündbar.
So minifizieren Sie CSS
- CSS einfügen oder eine .css-Datei ablegen bzw. auswählen.
- Strukturelle Optimierung an- oder abschalten und festlegen, ob /*!-Lizenzkommentare erhalten bleiben.
- Minifizierung starten.
- Größe vorher, nachher und Ersparnis in Prozent vergleichen.
- Ergebnis kopieren oder als .css-Datei herunterladen.
Typische Einsatzzwecke
- Stylesheets kleiner Websites ohne Build-Pipeline für die Produktion vorbereiten.
- Kritisches CSS für das Inline-Einbetten im <head> verkleinern.
- CSS für WordPress-Themes, Shop-Templates oder Custom-CSS-Felder kompakt machen.
- Doppelte Regeln aufspüren, indem Sie Original und optimiertes Ergebnis vergleichen.
- Lizenzpflichtige Bibliotheken minifizieren und die Lizenzkommentare behalten.
Beispiel einer strukturellen Optimierung
Aus .a { color: red; } .b { color: red; } wird .a,.b{color:red}. Aus .c { margin: 0; } .c { padding: 0; } wird .c{margin:0;padding:0}. Und in .d { color: blue; color: green; } bleibt nur die wirksame Deklaration color:green übrig.
Minifizieren ersetzt keine serverseitige Komprimierung mit Gzip oder Brotli. Beides zusammen liefert die kleinsten Übertragungsgrößen.
Häufig gestellte Fragen
Kann die strukturelle Optimierung meine Styles verändern?
CSSO berücksichtigt die Reihenfolge der Kaskade und führt nur sichere Zusammenführungen durch. Wenn Sie ganz sicher gehen möchten, deaktivieren Sie die Option und erhalten nur eine Zeichenminifizierung.
Bleiben Lizenzkommentare erhalten?
Ja, Kommentare im Format /*! ... */ bleiben erhalten, wenn die Option aktiviert ist. Alle anderen Kommentare werden entfernt.
Funktioniert es auch mit SCSS oder Less?
Der Minifier erwartet normales CSS. Kompilieren Sie SCSS oder Less zuerst. Zum Formatieren von SCSS und Less können Sie den CSS Formatter verwenden.
Wird mein CSS an einen Server gesendet?
Nein, die Minifizierung findet ausschließlich in Ihrem Browser statt.
Was ist kostenlos und was braucht Pro?
Eine Datei oder ein eingefügter Text ist kostenlos, und denselben Text können Sie danach mit anderen Optionen erneut verarbeiten. Neue Eingaben erfordern ToolStudio Pro mit unbegrenzter Nutzung, mehreren Dateien gleichzeitig als ZIP und ohne Werbung, jederzeit kündbar.