CSS-Minifizierer

Der CSS-Minifizierer ist ein kostenloses Tool, das unnötige Zeichen aus CSS entfernt und das minifizierte Stylesheet zusammen mit der Zeichenzahl vor und nach der Verarbeitung ausgibt.

Was bewirkt die CSS-Minifizierung?

Die CSS-Minifizierung verringert die Zeichenzahl eines Stylesheets, indem sie Formatierungen entfernt, die Browser nicht benötigen. Dazu gehören in der Regel Einrückungen, Zeilenumbrüche, Kommentare und optionale Leerzeichen rund um Satzzeichen.

Der Browser erhält weiterhin die CSS-Regeln, Selektoren und Deklarationswerte. Das gewünschte visuelle Ergebnis sollte unverändert bleiben, während die an den Browser übertragene Datei kleiner wird. Wie viel die Minifizierung eines CSS-Stylesheets in der Praxis bringt, hängt von der Ausgangsdatei, der HTTP-Komprimierung und dem Browser-Cache ab. Bei einem bereits gut komprimierten Stylesheet fällt die Verringerung der übertragenen Bytezahl möglicherweise nur gering aus.

Die Minifizierung ist vor der Bereitstellung nützlich, bei der Untersuchung übermäßig großer CSS-Dateien von Drittanbietern oder wenn du prüfen möchtest, wie stark die Entwicklungsformatierung zur Dateigröße beiträgt. Sie ist nicht mit einer Optimierung gleichzusetzen, die ungenutzte Selektoren entfernt, gleichwertige Regeln zusammenfasst oder Deklarationen umschreibt. Dieses Tool führt solche weitergehenden Aufgaben nicht aus.

Wie verwende ich den CSS-Minifizierer?

Füge ein Stylesheet in das Feld CSS ein und führe das Tool aus. Kopiere anschließend das Ergebnis aus Minifiziertes CSS in den passenden Build- oder Bereitstellungsprozess. Bewahre die lesbare CSS-Quelldatei auf, statt sie dauerhaft durch die minifizierte Kopie zu ersetzen.

1. Beginne mit dem CSS-Quellcode, den deine Website oder Anwendung verwendet.
2. Prüfe vor der Minifizierung, ob er korrekt geparst wird.
3. Füge ihn in CSS ein und führe das Tool aus.
4. Vergleiche CSS-Zeichen mit Minifizierte CSS-Zeichen.
5. Teste das Ergebnis auf einer Staging-Seite, einschließlich responsiver Zustände, Druckstile und interaktiver Komponenten.

Die CSS-Minifizierung erfolgt auf dem Server. Dein übermitteltes CSS wird über HTTPS an den Server übertragen und nicht gespeichert. Falls das Stylesheet vertrauliche URLs, interne Hostnamen oder andere sensible Inhalte enthält, solltest du prüfen, ob die Übermittlung an ein serverseitiges Tool mit den Richtlinien deiner Organisation zum Umgang mit solchen Daten vereinbar ist.

Wie ist das Ergebnis zu verstehen?

Das Ergebnis enthält das umgewandelte CSS und zwei Zeichenzahlen. So kannst du die Ausgabe prüfen und die Verringerung direkt erkennen. CSS-Zeichen gibt die Länge des übermittelten Textes an, Minifizierte CSS-Zeichen dagegen die Länge nach der Minifizierung.

Die Zeichenzahlen werden mit einer Funktion ermittelt, die Multibyte-Zeichen berücksichtigt. Sie sind keine exakte Vorhersage der über das Netzwerk übertragenen Datenmenge. UTF-8-Zeichen können mehr als ein Byte belegen, und die Komprimierung mit Brotli oder gzip kann die über HTTP gesendete Größe erheblich verändern.

Für dieses Tool wird kein separates Feld für Validierungs- oder Fehlermeldungen aufgeführt. Behandle es daher nicht als CSS-Validator. Häufige Probleme wie nicht zusammengehörige geschweifte Klammern, ein fehlender Doppelpunkt, eine nicht abgeschlossene Zeichenfolge, fehlerhafte Kommentare oder eine ungültige Verschachtelung musst du mit den Entwicklertools des Browsers, einem Linter oder einem standardkonformen Validator prüfen. Ungültiges CSS kann eine kompakt wirkende Ausgabe erzeugen, die sich trotzdem nicht wie beabsichtigt verhält.

Kleine Beispiele für die CSS-Minifizierung

Eine übliche minifizierte Fassung entfernt die Formatierung, behält aber die eigentliche Regel bei.

CSS

p { color: red; }

Minifiziertes CSS

p{color:red}

In diesem Beispiel enthält die lesbare Eingabe 17 Zeichen und die kompakte Fassung 12. Leerzeichen und Satzzeichen innerhalb von Zeichenfolgen in Anführungszeichen müssen Teil des Werts bleiben.

CSS

.notice, .warning { color: #c00; margin: 0 1rem; }

Minifiziertes CSS

.notice,.warning{color:#c00;margin:0 1rem}

Einfach jedes Leerzeichen zu löschen, ist nicht sicher. Leerraum kann einen Nachfahren-Kombinator darstellen, außerdem gelten für Rechenoperatoren in Funktionen wie calc() bestimmte Anforderungen an Leerzeichen. Auch Zeichenfolgen, Daten-URLs, maskierte Bezeichner und Werte benutzerdefinierter Eigenschaften müssen unter Berücksichtigung der Syntax verarbeitet werden.

Akzentzeichen und Zeichen aus nichtlateinischen Schriften können in Zeichenfolgen und, sofern es die CSS-Regeln für Bezeichner erlauben, in Selektoren vorkommen. Zahlen, Dezimalpunkte, Prozentzeichen und Einheiten gehören zur Syntax und sind keine rein dekorativen Zeichen. Sie können daher nicht ohne Kenntnis der jeweiligen Deklaration einfach verkürzt werden. Ein leeres Stylesheet enthält kein CSS, das minifiziert werden könnte. Bei sehr großen Stylesheets ist ein in den Build-Prozess integrierter Minifizierer meist leichter reproduzierbar und überprüfbar als das Kopieren von Text über ein Onlineformular.

Wann lohnt sich die CSS-Minifizierung nicht?

Eine erneute Minifizierung lohnt sich in der Regel nicht, wenn eine Datei bereits minifiziert ist oder als kompakte Produktionsdatei erzeugt wurde. Ein zweiter Durchlauf kann wenig oder gar nichts einsparen, fügt dem Veröffentlichungsprozess aber einen weiteren Verarbeitungsschritt hinzu.

• Formatiere CSS, das nur von einem Browser oder Build-System gelesen wird, nicht erst lesbar und minifiziere es anschließend erneut.
• Verwende die Minifizierung nicht als Ersatz für das Entfernen ungenutzter Framework-Regeln oder doppelter Deklarationen.
• Erwarte nicht, dass eine geringere Zeichenzahl renderblockierende Anfragen, Cache-Probleme oder langsam ladende Schriftarten sichtbar macht.
• Verwirf den formatierten Quellcode nicht, insbesondere wenn du Probleme mit Spezifität, Kaskadenebenen oder Media Queries untersuchen musst.

Wenn CSS automatisch gebündelt wird, solltest du den Minifizierer in diese Pipeline einbinden, damit jede Veröffentlichung dieselben Einstellungen verwendet. Wenn du zugehörige Ressourcen manuell bereitstellst, können der HTML-Minifizierer und der JS-Minifizierer den entsprechenden Vorgang auf diese Dateitypen anwenden.

Häufig gestellte Fragen

Verändert die CSS-Minifizierung die Spezifität von Selektoren?

Eine korrekte Minifizierung verändert die Spezifität von Selektoren nicht, da ihre Bestandteile und deren Reihenfolge erhalten bleiben sollten. Prüfe komplexe Selektoren dennoch sorgfältig, wenn der Quellcode Escape-Sequenzen, neuere Pseudoklassen oder generierte Syntax enthält, die ein älterer Minifizierer möglicherweise nicht versteht.

Kann ich benutzerdefinierte CSS-Eigenschaften minifizieren?

Benutzerdefinierte Eigenschaften können einbezogen werden. Ihre Werte müssen jedoch möglicherweise Tokens und Leerzeichen für eine spätere Ersetzung mit var() beibehalten. Teste Deklarationen mit Berechnungen, Fallbacks oder eingebetteten Zeichenfolgen in den von deinem Projekt unterstützten Browsern, statt davon auszugehen, dass jedes sichtbare Leerzeichen optional ist.

Erstellt das Tool eine Source Map?

Es wird kein Source-Map-Ergebnis aufgeführt. Wenn du für die Fehlersuche in der Produktionsumgebung kompaktes CSS auf Sass, Less oder eine andere Quelle zurückführen musst, erzeuge die minifizierte Datei und die zugehörige Source Map mit dem Compiler oder Bundler, der die ursprüngliche Dateistruktur kennt.

Bleiben Lizenzkommentare in der Ausgabe erhalten?

Gehe nicht davon aus, dass CSS-Kommentare erhalten bleiben. Wenn die Lizenz einer Abhängigkeit verlangt, dass ein Hinweis zusammen mit dem verteilten Code bereitgestellt wird, bewahre diesen separat auf oder prüfe die erzeugte Ausgabe vor der Veröffentlichung.

Kann die Minifizierung fehlerhaftes CSS reparieren?

Nein. Die Minifizierung entfernt unnötige Zeichen, repariert aber weder ungültige Selektoren noch nicht unterstützte Eigenschaften, fehlende Ressourcen oder eine fehlerhafte Kaskade. Behebe zuerst Parsing-Warnungen und visuelle Fehler im Quellcode.

Prüfungen vor der Bereitstellung

Speichere die minifizierte Ausgabe als separate Produktionsdatei, prüfe, ob URLs und Inhalte in Anführungszeichen unverändert sind, und lade sie bei geöffneter Browserkonsole auf einer Staging-Seite. Vergleiche repräsentative Seiten bei schmalen und breiten Viewport-Größen. Vergewissere dich anschließend, dass dein Server den erwarteten Inhaltstyp, die vorgesehene Cache-Richtlinie und die erwartete HTTP-Komprimierung verwendet.