CSS-Code online minifizieren

Nicht jedes Projekt hat eine Build-Pipeline, und nicht jede Aufgabe rechtfertigt es, eine einzurichten. Für eine schnelle Minifizierung brauchen Sie weder Node.js noch eine Kommandozeile, weder eine PostCSS-Konfiguration noch Kenntnisse eines Bundlers. Sie fügen Ihren rohen CSS-Code in das Eingabefeld ein, klicken auf Minifizieren und erhalten das Ergebnis in weniger als einer Sekunde. Genau das macht die Online-Minifizierung zur einfachsten Möglichkeit, ein Stylesheet vor der Auslieferung zu verkleinern. Sie eignet sich, wenn keine Build-Umgebung vorhanden ist, wenn Sie schnell prüfen möchten, wie stark sich eine Datei komprimieren lässt, oder wenn Sie den Code eines fremden Stylesheets einmalig verdichten wollen. Der gesamte Ablauf dauert weniger als dreißig Sekunden und liefert dennoch verlässlich ein kleineres, produktionsreifes Ergebnis, das jeder Bundler ebenso erzeugen würde.

Die Minifizierung von CSS-Code ist verlustfrei. Das Werkzeug führt einen Lexer über Ihre Eingabe und erkennt die Tokens: Selektoren, Eigenschaftsnamen, Werte, At-Regel-Schlüsselwörter, Trennzeichen und Leerraum. Leerraum-Tokens zwischen anderen Tokens werden entfernt, Kommentare der Form /* */ werden gelöscht und das optionale Semikolon vor einer schließenden Klammer entfällt. Die verbleibende Tokenfolge wird ohne Trennzeichen wieder zu einer Zeichenkette zusammengesetzt, das ist die minifizierte Ausgabe. Zusätzlich kürzt das Werkzeug gleichwertige Werte, etwa #ffffff zu #fff oder 0px zu 0, weil der Browser beide Formen identisch auswertet. Da die Tokenfolge unverändert bleibt und der Browser CSS ausschließlich anhand dieser Folge interpretiert, verhalten sich Kaskade, Spezifität und Vererbung in beiden Fassungen exakt gleich. Es findet keine Umschreibung Ihrer Regeln statt, das gerenderte Ergebnis ist dasselbe wie zuvor.

Als Eingabe akzeptiert das Werkzeug alles von einer einzelnen Regel mit einer Deklaration bis zu einem von einem Framework erzeugten Stylesheet mit Zehntausenden Zeilen. Es gibt keine Längenbegrenzung, die gesamte Eingabe wird in einem Durchgang verarbeitet und als eine durchgehende Zeichenkette ausgegeben. Große Stylesheets müssen Sie nicht vorher in kleinere Teile zerlegen. Auch moderne CSS-Syntax wird korrekt behandelt: Media Queries, @supports-Blöcke, @keyframes-Animationen, @font-face- und @layer-Regeln, benutzerdefinierte Eigenschaften mit var(), native Verschachtelung, Container Queries und die :has()-Pseudoklasse bestehen aus regulären CSS-Tokens, die vollständig erhalten bleiben. Auch herstellerspezifische Präfixe wie -webkit- oder -moz- gehören zum Eigenschaftsnamen und werden nicht verändert. Entfernt werden ausschließlich Leerraum und Kommentare. Die Struktur verschachtelter Regeln innerhalb von @media- oder @supports-Blöcken bleibt in der Ausgabe genau erhalten.

Auch wenn Sie ohne Build-Werkzeuge arbeiten, sollten Sie Minifizierung und Transportkomprimierung zusammen nutzen, denn sie ergänzen einander. Die Minifizierung verringert die Zeichenzahl im Code selbst, gzip oder Brotli auf dem Server verkleinern zusätzlich die tatsächlich übertragene Datenmenge, indem sie wiederkehrende Bytefolgen durch kurze Verweise ersetzen. Beide Stufen greifen an unterschiedlichen Stellen und ihre Effekte addieren sich vollständig. Minifizierter Code lässt sich sogar besser komprimieren als formatierter, weil die Token nach dem Entfernen des Leerraums dichter beieinanderliegen und sich Muster häufiger wiederholen. Ein Stylesheet von 80 KB, das minifiziert auf 52 KB sinkt, wird mit aktivem gzip häufig als nur rund 11 KB übertragen. Prüfen Sie im Netzwerk-Tab der Entwicklerwerkzeuge, ob Ihr Server bereits komprimiert, und setzen Sie die Online-Minifizierung als vorgelagerten Schritt ein.

Die Verarbeitung geschieht vollständig lokal in Ihrem Browser mit clientseitigem JavaScript. Ihr CSS-Code wird nicht an einen Server von FixTools und nicht an einen Dritten gesendet, er verlässt Ihr Gerät zu keinem Zeitpunkt und wird nirgends außerhalb Ihres Browser-Tabs gespeichert. Überprüfen können Sie das, indem Sie den Netzwerk-Tab der Entwicklerwerkzeuge öffnen: Während der Minifizierung entsteht keine ausgehende Anfrage für Ihren Code. Bewahren Sie stets den lesbaren Originalcode auf, denn die minifizierte, einzeilige Ausgabe lässt sich kaum bearbeiten. Ändern Sie das CSS künftig, passen Sie die Quelle an und minifizieren erneut. Das Werkzeug ist vollständig kostenlos, benötigt keine Installation, verlangt keine Anmeldung, setzt kein Wasserzeichen und kennt kein Tageslimit. Sie können denselben Code so oft minifizieren, wie Ihre Arbeit es erfordert, ohne an Grenzen zu stoßen.