Wie minimiere ich CSS online, ohne etwas zu installieren?

Fügen Sie Ihr CSS unter CSS-Eingabe ein oder ziehen Sie eine .css-Datei hinein und klicken Sie dann auf CSS minimieren. Kommentare und überflüssiger Leerraum werden entfernt, und Sie können das Ergebnis kopieren oder als styles.min.css herunterladen.

Behält der CSS-Minimierer Lizenzkommentare und Data-URIs unverändert bei?

Ja. Normale Kommentare werden entfernt, aber /*! license */-Kommentare bleiben erhalten. Zeichenketten in Anführungszeichen, url()-Werte und Data-URIs werden separat tokenisiert, sodass Leerraum-Regeln sie nicht verändern.

Wie mache ich minimiertes CSS wieder lesbar?

Klicken Sie statt auf CSS minimieren auf CSS verschönern. Der Code wird mit zwei Leerzeichen pro Ebene neu eingerückt, und Selektor-Doppelpunkte wie bei a:hover werden von Eigenschafts-Doppelpunkten unterschieden. Herunterladen speichert ihn als styles.css.

Was bedeutet die gzip-Zahl neben der Verringerung?

Sie ist eine Schätzung der Ausgabegröße nach gzip-Kompression, gemessen mit der CompressionStream-API des Browsers. Fehlt Ihrem Browser diese API, wird die gzip-Größe nicht angezeigt.

Wird mein CSS beim Minimieren an einen Server gesendet?

Nein. Das Minimieren übernimmt ein JavaScript-Tokenizer in Ihrem Browser, ohne externe Bibliothek. Es wird nichts hochgeladen, daher können Sie es für private Stylesheets nutzen.

Ist es wirklich kostenlos?

Ja. Jedes Tool ist kostenlos nutzbar, ohne Konto und ohne Kreditkarte. Die Verarbeitung läuft auf Ihrem Gerät statt auf unseren Servern – genau deshalb können wir den Dienst kostenlos betreiben.

Funktioniert es auf Mobilgeräten?

Ja. Es läuft in aktuellen mobilen Browsern unter iOS und Android, ohne dass etwas installiert werden muss.

🗜️

CSS-Minifier & -Beautifier – kostenlos

Minifizieren Sie CSS zur Dateigrößenreduzierung oder verschönern Sie minifiziertes CSS zur besseren Lesbarkeit. Sofort, in Ihrem Browser.

Läuft in Ihrem BrowserKein Konto, keine Pop-upsKeine Anmeldung erforderlichFür immer kostenlos

Funktioniert nach dem Laden offline

oder legen Sie unten eine .css-Datei ab

Legen Sie hier eine .css-Datei ab oder klicken Sie zum Auswählen

CSS · Verarbeitung auf Ihrem Gerät

oder drücken Sie Strg+V, um aus der Zwischenablage einzufügen

Dateien durchsuchen

CSS-Eingabe

CSS-Ausgabe

Ausgabe erscheint hier…

Häufige Anwendungen

CSS für die Produktionsbereitstellung minifizierenReduzieren Sie die CSS-Dateigröße vor der Bereitstellung in der Produktion — schnellere Seitenladezeiten und geringere Bandbreitkosten.
Minifizierten CSS zum Debuggen verschönernFormatieren Sie komprimierten oder miniifizierten CSS in lesbaren Code, damit Sie Stile überprüfen und debuggen können.
CSS für E-Mail-Vorlagen minifizierenKomprimieren Sie CSS für HTML-E-Mail-Vorlagen, wo Dateigröße und Inline-Stil-Aufblähung wichtig sind.
CSS für WordPress-Themes minifizierenReduzieren Sie die Größe von benutzerdefinierten WordPress-Theme-Stylesheets für bessere PageSpeed-Bewertungen.
CSS für Code-Überprüfung verschönernFormatieren Sie jede CSS-Datei in sauberen, eingerückten, lesbaren Code, der zur Überprüfung und Zusammenarbeit bereit ist.

So funktioniert es

Dieses Tool nutzt einen selbst geschriebenen CSS-Tokenizer ohne Abhängigkeiten, vollständig in JavaScript – keine externen Bibliotheken, keine Serveraufrufe. Der Tokenizer ordnet jedes Zeichen als Code, Kommentar, Zeichenkette in Anführungszeichen oder url()-Wert ein, bevor irgendeine Umwandlung erfolgt. So können Leerraumregeln keine Zeichenketteninhalte, Data-URIs oder calc()-Ausdrücke beschädigen.

1
Tokenisierungsdurchlauf
Das Eingabe-CSS wird Zeichen für Zeichen durchsucht und in typisierte Tokens zerlegt: rohe Codeabschnitte, /* ... */-Kommentare, Zeichenketten in Anführungszeichen (mit erhaltenen Escape-Sequenzen) und url(...)-Blöcke. So betreffen die Umwandlungen im nächsten Schritt nur echte CSS-Syntax – nie den Inhalt eines String-Literals oder einer Data-URI.
2
Minimierung oder Verschönerung
Im Minify-Modus werden normale Kommentare entfernt (/*! license */-Kommentare bleiben erhalten), Leerraumfolgen in Code-Tokens werden zu einzelnen Leerzeichen zusammengefasst, und Leerraum neben den Satzzeichen { } : ; , > ~ wird entfernt. Leerzeichen um + und - bleiben absichtlich erhalten, um calc()-Ausdrücke nicht zu zerstören. Im Beautify-Modus wird der Code zuerst zu einer sauberen Basis minimiert, dann neu tokenisiert und mit Zwei-Leerzeichen-Einrückung neu eingerückt, wobei die Erkennung von Deklarations-Doppelpunkten property: value-Doppelpunkte von Selektor-Doppelpunkten wie a:hover unterscheidet.
3
Geschätzte Gzip-Größe
Nach dem Erzeugen der Ausgabe wird die native CompressionStream-API des Browsers verwendet, um das Ergebnis mit gzip zu komprimieren und die resultierende Bytezahl zu messen. Das ergibt eine realistische Schätzung der Übertragungsgröße, wie sie ein Webserver mit gzip-Kompression senden würde.
4
Kopieren oder herunterladen
Das verarbeitete CSS wird über die Clipboard API in die Zwischenablage geschrieben oder als styles.min.css (Minify-Modus) bzw. styles.css (Beautify-Modus) über ein Blob mit dem MIME-Typ text/css heruntergeladen. Die prozentuale Größenreduktion wird live beim Tippen angezeigt.

CSS-Minifier & -Beautifier – kostenlos

Häufige Anwendungen

So funktioniert es

Ähnliche Tools

SVG-Optimierer & -Minifier

CSS-Beautifier

JSON-Formatierer

Häufige Fragen