CSS minifizieren
Kleinere Stylesheets, dasselbe Design
Hier können Sie CSS minifizieren: Das kostenlose Online-Tool entfernt Kommentare und Abstände aus Ihrem Stylesheet und gibt eine kleinere Datei zurück. Fügen Sie zuerst Ihr CSS ein oder legen Sie Ihre Dateien ab. Wählen Sie danach die Aktion aus. Kopieren Sie schließlich das Ergebnis, denn die ganze Arbeit passiert in diesem Tab.
- KostenlosPreis
- Nicht nötigKonto
- KeineUploads
- Bei jedem DurchlaufGeprüft
CSS-Minifier
Stylesheet einfügen oder Dateien ablegen — nichts wird hochgeladen
Minifiziertes Ergebnis
- Original
- —
- Minifiziert
- —
- Gespart
- —
- Mit gzip
- —
- Regeln
- —
- Dauer
- —
Bereit. Fügen Sie Ihr CSS ein und drücken Sie dann Minifizieren oder Verschönern.
Was bedeutet es, CSS zu minifizieren?
Ein CSS-Minifier schreibt ein für Menschen geschriebenes Stylesheet in eines um, das der Browser schneller lädt. Er wirft Ihre Kommentare, Ihre Einrückung und die Lücken weg, die nur Lesern helfen. Jede Regel, die Sie geschrieben haben, bleibt jedoch erhalten, sodass die Seite genau gleich aussieht.
Die Ersparnis zählt, weil ein Stylesheet das Rendern blockiert. Ein Browser zeichnet kein einziges Pixel, bevor er Ihr CSS hat, also kommt jedes gesparte Byte vor dem ersten Zeichnen an statt danach. Deshalb zeigt ein Stylesheet, das von 60 KB auf 42 KB schrumpft, Ihr Design früher.
Manchmal heißt dieselbe Aufgabe CSS-Kompressor. Beide Begriffe beschreiben eines: weniger Zeichen, identisches Verhalten. Kurz gesagt, Sie liefern die kleine Datei aus und behalten die lesbare.
Sicher zu minifizieren heißt zu wissen, was der Parser braucht. Die MDN-Referenz zur CSS-Syntax ist die kürzeste ehrliche Beschreibung davon.
Wo die meisten Tools Ihr CSS still zerstören
Drei Fallen richten fast den ganzen Schaden an, und ein Tool auf Basis von Suchen und Ersetzen tappt in jede. Erstens braucht `calc(100% - 20px)` die Leerzeichen um dieses Minus. Entfernt man sie, verwirft der Browser die ganze Deklaration, sodass Ihr Layout ohne jede Fehlermeldung zusammenbricht.
Zweitens wählen `.card .title` und `.card.title` verschiedene Elemente. Diese Lücke ist der Nachfahren-Kombinator, und sie trägt Bedeutung. Drittens enthält eine Data-URI in `url()` Semikolons und Kommas, die überhaupt keine Trenner sind.
Dieses Tool liest Ihr Stylesheet Zeichen für Zeichen, also weiß es, welche Lücke es gerade vor sich hat. Dadurch entfernt es die Abstände ohne Bedeutung und lässt die Abstände mit Bedeutung stehen.
Wann Sie CSS minifizieren sollten
Minifizieren Sie zuletzt, nach Ihrem Build und nach Ihren Tests. Behalten Sie das lesbare Stylesheet im Editor und veröffentlichen Sie das kleine, denn niemand sollte je eine minifizierte Datei von Hand bearbeiten.
Am meisten lohnt es sich beim Stylesheet, das jede Seite lädt. Zum Beispiel verdient ein gemeinsames Stylesheet, das jeder Besucher lädt, weit mehr Aufmerksamkeit als eine seitenspezifische Datei.
Und was ist mit ungenutztem CSS?
Regeln zu entfernen, die nichts nutzt, ist eine andere und riskante Aufgabe. Eine Klasse, die Ihr JavaScript später hinzufügt, wirkt für einen Scanner ungenutzt, also rät dieses Tool nie. Stattdessen kürzt es, was Sie haben.
Auf dieser Seite
- Das Tool
- Was bedeutet es, CSS zu minifizieren?
- CSS in vier Schritten minifizieren
- Ein CSS-Minifier, der seine eigene Arbeit prüft
- Das Beste aus diesem CSS-Kompressor herausholen
- Fehler, die ein minifiziertes Stylesheet zerstören
- Häufige Fragen zum CSS-Minifier
- Weitere Tools, die Sie sofort nutzen können
Weiterlesen
CSS in vier Schritten minifizieren
Ohne Software, ohne Registrierung, ohne Warteschlange. Das Ganze läuft in dem Tab, den Sie schon offen haben.
- 1
Stylesheet hinzufügen
Fügen Sie Ihr CSS in den Editor ein oder legen Sie Ihre .css-Dateien im Upload-Tab ab. Beide Wege erledigen dieselbe Arbeit.
- 2
Wählen, was wegfällt
Kommentare fallen standardmäßig weg. Außerdem können Sie Farben kürzen und Regeln mit leerem Inhalt entfernen.
- 3
Minifizieren drücken
Das Tool geht jedes Zeichen durch, schreibt das Stylesheet neu und liest dann seine eigene Antwort erneut, bevor es Ihnen etwas zeigt.
- 4
Kopieren oder herunterladen
Nehmen Sie das Ergebnis als Text oder speichern Sie es als .min.css-Datei. Dabei bleibt Ihr Original genau so, wie Sie es verlassen haben.
Ein CSS-Minifier, der seine eigene Arbeit prüft
Browser scheitern bei kaputtem CSS lautlos. Sie verwerfen die Deklaration und machen weiter, also sagt Ihnen niemand, dass etwas schiefging.
Es schützt calc()
In calc, clamp, min und max behält ein Plus oder Minus mit Leerzeichen seine Leerzeichen. Daher überlebt Ihre Arithmetik, genau dort, wo die meisten Minifier lautlos scheitern.
Es prüft jeden Durchlauf
Das Tool liest seine eigene Ausgabe erneut und vergleicht sie mit dem, was es schreiben wollte. Weicht etwas ab, sagt es Ihnen das, statt zu schweigen.
Es kennt Ihre Selektoren
Ein Leerzeichen zwischen zwei Selektoren bedeutet „Nachfahre“, also bleibt es. Um einen Kind- oder Geschwister-Kombinator bedeutet es nichts, also fällt es weg.
Es reicht url() unverändert durch
Eine Data-URI kann Semikolons, Kommas und Klammern enthalten. Dieses Tool behandelt das ganze url() als ein Stück und kopiert es Byte für Byte.
Nichts verlässt Ihren Tab
Ihr Stylesheet reist nirgendwohin. Es gibt keine Anfrage, keinen Speicher und kein Protokoll, deshalb können Sie sogar Kundenarbeit hier sicher einfügen.
Es zeigt die echte Zahl
Sie sehen die gzip-Größe neben der Rohgröße, denn gzip ist das, was tatsächlich bei Ihrem Besucher ankommt.
Das Beste aus diesem CSS-Kompressor herausholen
Ein paar kleine Gewohnheiten halten ein minifiziertes Stylesheet berechenbar.
- Das Original behalten. Bearbeiten Sie immer das lesbare Stylesheet. So bleibt die minifizierte Kopie etwas, das Sie erzeugen, nie etwas, das Sie pflegen.
- Zuletzt minifizieren. Führen Sie es nach Sass, nach PostCSS und nach Ihren Tests aus. Sonst testen Sie eine Datei und liefern eine andere aus.
- Mit gzip ausliefern. Minifizieren und Komprimieren addieren sich. Dadurch liegt die Übertragungsgröße deutlich unter der Dateigröße auf der Festplatte.
- Auf Lizenzhinweise achten. Lassen Sie diesen Schalter an, wenn ein genutztes Framework verlangt, dass sein Urheberkommentar mit dem Code reist.
- Den Schalter für leere Regeln prüfen. Er ist standardmäßig aus, denn eine leere Regel dokumentiert manchmal eine Absicht. Schalten Sie ihn ein, wenn Sie wissen, dass das nicht so ist.
- Auf das Prüfsiegel achten. Meldet ein Durchlauf je, dass er nicht prüfen konnte, liefern Sie diese Datei nicht aus. Schicken Sie uns stattdessen den Fall und behalten Sie Ihr Original.
Fehler, die ein minifiziertes Stylesheet zerstören
Fast jede Geschichte à la „der Minifier hat mein Design kaputt gemacht“ ist einer dieser drei Fälle.
Die calc-Leerzeichen verlieren
Ein Tool, das sie entfernt, macht aus einer gültigen Länge nichts. Ihr Layout bricht dann ohne einen einzigen Konsolenfehler zusammen.
Die minifizierte Datei bearbeiten
Ihre Änderungen verschwinden beim nächsten Build. Die Korrektur gehört also immer ins Quell-Stylesheet.
Zweimal minifizieren
Ein bereits minifiziertes Stylesheet erneut durchlaufen zu lassen, spart nichts und macht den nächsten Diff nur schwerer lesbar.
Häufige Fragen zum CSS-Minifier
Zerstört das Tool mein Design, wenn ich CSS minifiziere?
Das sollte es nicht, und es prüft das, statt es anzunehmen. Das Tool liest jeden Durchlauf erneut und vergleicht ihn mit dem, was es schreiben wollte, also bemerkt es eine verlorene Klammer oder ein beschädigtes url() und sagt es Ihnen, statt ein kaputtes Stylesheet auszuliefern.
Funktioniert calc() weiterhin?
Ja, und das zählt mehr, als es klingt. In calc, clamp, min und max bleiben die Leerzeichen um ein Plus oder Minus genau dort, wo Sie sie gesetzt haben, denn ohne sie wird eine gültige Länge zu einer Deklaration, die der Browser verwirft.
Wie viel kleiner wird mein Stylesheet?
Ein lesbares Stylesheet schrumpft meist um 20 bis 40 Prozent, und das Tool zeigt den genauen Wert für Ihre Datei. Ein bereits kompaktes Stylesheet spart jedoch viel weniger, da es weniger Abstände zu entfernen gibt.
Entfernt es CSS, das ich nicht nutze?
Nein, das ist Absicht. Eine Klasse, die Ihr JavaScript später hinzufügt, wirkt für jeden Scanner ungenutzt, also würde Raten dort echte Seiten zerstören. Deshalb kürzt dieses Tool, was Sie geschrieben haben, und überlässt die Entscheidungen Ihnen.
Landet mein CSS auf einem Server?
Nein. Der ganze Minifier läuft in Ihrem Browser-Tab. Es gibt keine Anfrage, keinen Speicher und kein Protokoll, deshalb können Sie auch vertrauliche Arbeit gefahrlos einfügen.
Kann ich mehrere Dateien auf einmal minifizieren?
Ja. Öffnen Sie den Upload-Tab und legen Sie beliebig viele .css-Dateien ab. Das Tool minifiziert jede einzeln, und Sie können sie nacheinander herunterladen.
Weitere Tools, die Sie sofort nutzen können
Jedes davon läuft in Ihrem Browser und verlangt nichts.
JavaScript minifizieren
Verkleinern Sie ein Skript auf dieselbe Weise, mit derselben Prüfung, dass das Ergebnis noch zu Ihrem Code passt.
Tool öffnen →SVG komprimieren
Verkleinern Sie SVG-Dateien oder eingefügtes Markup und entfernen Sie darin versteckte Skripte.
Tool öffnen →PNG-zu-WebP-Konverter
Wandeln Sie einen Stapel Bilder in ein leichteres Format um, mit erhaltener Transparenz.
Tool öffnen →
Verkleinern Sie Ihr nächstes Stylesheet in Sekunden
CSS einfügen, eine Schaltfläche drücken und die Ersparnis selbst prüfen. Nichts reist irgendwohin, und nichts bleibt gespeichert.