CSS-Code minifizieren und Größenersparnis messen

Dieser Minifizierer entfernt diesen Übertragungsballast und bewahrt dabei Zeichenketten, Selektorreihenfolge, Deklarationen und Regelstruktur. Er liefert kompaktes CSS, die ursprüngliche und minifizierte UTF-8-Bytezahl sowie die prozentuale Ersparnis. Der Vorgang ist deterministisch, benötigt keinen Netzwerkzugriff und weist Eingaben mit unausgeglichenen geschweiften Klammern zurück.

Was der Minifizierer entfernt

Der Minifizierer konzentriert sich auf Formatierung, die ein Browser beim Empfang eines Stylesheets nicht benötigt. Er entfernt Blockkommentare, verdichtet Folgen von Leerzeichen und Zeilenumbrüchen, beseitigt Abstände an strukturellen Satzzeichen und entfernt das letzte Semikolon unmittelbar vor einer schließenden geschweiften Klammer. Regeln werden nicht umsortiert, Selektoren nicht zusammengeführt, benutzerdefinierte Eigenschaften nicht umbenannt, Farben nicht verkürzt und Berechnungen nicht umgeschrieben. Diese vorsichtige Grenze ist wichtig, weil CSS-Verhalten von Quellreihenfolge, Spezifität und dem genauen Inhalt bestimmter Werte abhängt. Zeichenketten in Anführungszeichen werden getrennt verarbeitet. Deshalb bleiben Leerzeichen, Klammern, Satzzeichen und kommentarähnlicher Text in einer URL oder in generiertem Inhalt unverändert. Auch maskierte Anführungszeichen werden berücksichtigt. Leerzeichen zwischen Tokens bleiben erhalten, wenn ihre Entfernung zwei Wörter oder Werte verbinden könnte. Verwenden Sie das Ergebnis als generierte Ressource und bewahren Sie die lesbare Originaldatei für die Wartung in der Versionsverwaltung auf.

So funktionieren Prüfung und Messung

Vor der Ausgabe verfolgt der Scanner jede öffnende und schließende geschweifte Klammer außerhalb von Kommentaren und Zeichenketten. Eine schließende Klammer ohne vorherige Öffnung oder eine am Ende noch offene Klammer führt zu einem Fehler wegen ungültiger Eingabe statt zu unvollständigem CSS. Diese Prüfung erkennt typische Kopierfehler und abgeschnittene Stylesheets frühzeitig. Die Funktion weist außerdem fehlendes oder leeres CSS, nicht abgeschlossene Kommentare und offene Zeichenketten zurück, da sich solche Eingaben nicht zuverlässig minifizieren lassen. Größen werden in UTF-8-Bytes und nicht als JavaScript-Zeichen gezählt. Das ist bei nicht lateinischen Schriftnamen, lokalisierten generierten Inhalten oder Unicode-Selektoren wichtig, denn ein sichtbares Zeichen kann bei der Übertragung mehrere Bytes belegen. Der Prozentsatz wird aus beiden Bytezahlen berechnet und auf zwei Dezimalstellen gerundet. Derselbe deterministische Scanner verarbeitet jede Anfrage ohne Netzwerk, Zufall, Uhr oder externen Zustand. Identische Eingaben erzeugen daher stets dasselbe CSS und dieselben Messwerte.

Das Ergebnis im Auslieferungsprozess verwenden

Ein üblicher Ablauf behält formatiertes CSS als bearbeitbare Quelle und minifiziert nur die Kopie für eine Website, ein Anwendungspaket, eine E-Mail-Vorlage oder einen statischen Asset-Host. Senden Sie das vollständige Stylesheet, lesen Sie den kompakten Wert aus dem Feld css und schreiben Sie ihn in das Deployment-Artefakt. original_bytes und minified_bytes eignen sich für Build-Protokolle; reduction_percent zeigt die Ersparnis unmittelbar verständlich an. Ein Continuous-Integration-Job kann diese Werte zwischen Versionen vergleichen und unbeabsichtigtes Wachstum erkennen. Größenbudgets sollten jedoch die exakten Bytewerte statt des gerundeten Prozentsatzes verwenden. Der Scanner ist ein Minifizierer und kein vollständiger CSS-Compiler: Er löst keine Importe auf, ergänzt keine Herstellerpräfixe, prüft nicht jede Eigenschaft, transpiliert keine neue Syntax und verbindet keine Dateien. Führen Sie solche Umwandlungen zuerst aus und minifizieren Sie anschließend das endgültige CSS. Scheitert die Klammerprüfung, korrigieren oder erzeugen Sie die Quelle neu. Die API-Automatisierung kostet $0.002 je Anfrage.