CSS-Minifizierer

CSS an einem Ort minifizieren und komprimieren

Dieser CSS-Minifier verkleinert Ihre Stylesheets, indem er jedes Zeichen entfernt, das der Browser nicht benötigt — Kommentare, Leerzeichen, Zeilenumbrüche und das redundante letzte Semikolon in jeder Regel — sodass die Datei, die Sie ausliefern, byte-für-byte kleiner ist, aber identisch dargestellt wird. Fügen Sie Ihren Code ein oder legen Sie eine .css-Datei ab, und das komprimierte Ergebnis erscheint sofort mit den exakten Bytes und dem eingesparten Prozentsatz.

Es ist auch ein CSS-Kompressor und ein CSS-Formatierer in einem: Ein einziger Schalter wechselt zwischen Minifizieren und De-Minifizieren, sodass dasselbe Tool, das ein Stylesheet komprimiert, es auch wieder in lesbaren, eingerückten Code expandieren kann.

Was entfernt wird — und was niemals angetastet wird

Beim CSS-Minifizieren entfernt das Tool Kommentare, bricht alle Leerzeichen zusammen, entfernt die Leerzeichen um Symbole wie { } : ; , > + und löscht das letzte Semikolon vor jeder schließenden geschweiften Klammer. Aktivieren Sie den Aggressiv-Modus, werden zusätzlich führende Nullen entfernt (0.5em → .5em) und die Einheit bei Nullwerten (0px → 0).

Entscheidend ist, dass es verlustfrei ist. Zeichenketten in Anführungszeichen, url()-Werte und calc()-Ausdrücke werden vor jeder Entfernung geschützt, sodass ein Wert wie calc(100% - 2rem) seine erforderlichen Leerzeichen behält und ein Bildpfad nie verändert wird. Viele schnelle Online-Minifier scheitern an calc() — dieser nicht.

Minifizieren oder formatieren — ein echtes bidirektionales Tool

Müssen Sie ein Stylesheet lesen, das auf eine einzige Zeile komprimiert wurde? Wechseln Sie in den Formatier-Modus, um CSS zu de-minifizieren: Das Tool rückt den Code neu ein, setzt jede Deklaration in eine eigene Zeile, fügt nach jedem Doppelpunkt ein Leerzeichen ein und ordnet Selektorlisten sauber an. Wählen Sie 2-Leerzeichen-, 4-Leerzeichen- oder Tab-Einrückung, um dem Stil Ihres Projekts zu entsprechen.

Da Minifizieren und Formatieren umkehrbar sind, können Sie minifiziertes Produktions-CSS einfügen, es lesen, anpassen und erneut minifizieren — alles ohne die Seite zu verlassen.

Vergleich mit cssminifier.com, CleanCSS und cssnano

cssminifier.com ist die meistgenutzte Online-Option, lädt Ihren Code aber auf deren Server hoch. Bei proprietären Stylesheets — Kundenprojekte, unveröffentlichte Designs, interne Tools — ist das ein echtes Risiko. CleanCSS und cssnano sind Node.js-Bibliotheken: ideal für automatisierte Pipelines, aber ohne lokale Installation nicht verfügbar. Der CSS-Minifier von freeformatter.com und der von TopTal sind ebenfalls serverseitig.

Dieses Tool verarbeitet alles lokal mit JavaScript — es wird niemals etwas hochgeladen. Es deckt die häufigsten Minifizierungsoptimierungen ab (Leerzeichen, Kommentare, Semikola, Null-Einheiten, führende Nullen) und fügt im selben Schritt eine Gzip-Schätzung hinzu. Kein Konto, kein Upload, keine Installation — funktioniert auf iPhone, Android, Mac, Windows und Linux.

Sehen Sie die eingesparten Bytes — einschließlich Gzip

Eine auffällige Statistikleiste zeigt die Originalgröße, die Ausgabegröße und die eingesparten Bytes und den Prozentsatz, sodass Sie immer genau wissen, um wie viel kleiner Ihr CSS geworden ist. Größen werden in echten UTF-8-Bytes gemessen, nicht in Zeichenanzahlen, sodass sie dem entsprechen, was Ihr Server tatsächlich ausliefert.

Das Tool zeigt auch einen lokal im Browser berechneten gezippten Wert an. Minifizierung und Gzip ergänzen sich — minifizieren Sie die Quelle, dann lassen Sie Ihren Host sie komprimieren — und beide Zahlen zu sehen macht die kombinierte Einsparung offensichtlich.

100 % privat — nichts verlässt Ihren Browser

Jede Minifizierung und Formatierung läuft lokal in Ihrem Browser mittels JavaScript. Ihr CSS wird niemals hochgeladen, protokolliert oder gespeichert, was diesen Dienst zu einem sicheren Ort macht, um proprietäre, unveröffentlichte oder Kunden-Stylesheets zu komprimieren. Es ist keine Anmeldung erforderlich und es gibt keine Begrenzung außer dem Arbeitsspeicher Ihres Geräts. Es funktioniert auch offline — sobald die Seite geladen ist, trennen Sie Ihre Internetverbindung und der Minifier läuft weiter. Setzen Sie ein Lesezeichen für diesen Online-CSS-Minifier und greifen Sie darauf zurück, wenn Sie CSS komprimieren, eine Datei verkleinern oder ein minifiziertes Stylesheet lesen müssen.