CSS Minifier online: Kommentare und Leerraum entfernen
Mit diesem CSS Minifier wird Ihr Stylesheet kleiner: Kommentare, Zeilenumbrüche und alle Leerzeichen, die der Browser nicht braucht, fallen weg. Fügen Sie Ihr CSS oben ein, und die minifizierte Fassung erscheint nach einem Sekundenbruchteil darunter, zusammen mit der genauen Zahl eingesparter Bytes. Alles läuft online in Ihrem Browser: kein Upload, kein Konto, keine Installation.
CSS minifizieren: Was wegfällt und was bleibt
Beim Minifizieren verhält sich jede Regel genau wie vorher. Entfernt wird nur, was für menschliche Augen da ist: Kommentare verschwinden, Leerraum schrumpft zusammen, Leerzeichen um geschweifte Klammern, Doppelpunkte und Kommas fallen weg, und das letzte Semikolon vor einer schließenden Klammer wird gestrichen. Zeichenketten in Anführungszeichen, url()-Werte und maskierte Zeichen bleiben unverändert, sodass etwa "a b" sein Leerzeichen behält.
Vorher: /* Buttons */ .btn { color: #fff; margin: 0 auto; }
Nachher: .btn{color:#fff;margin:0 auto}
So nutzen Sie den CSS Minifier online
- Fügen Sie Ihr CSS in das Feld Rohes CSS ein oder tippen Sie es direkt dort.
- Kurz nachdem Sie aufhören zu tippen, erscheint darunter das minifizierte CSS mit Originalgröße, neuer Größe und eingespartem Prozentsatz. Einen Knopf zum Starten gibt es nicht.
- Tippen Sie auf In die Zwischenablage kopieren, um das Ergebnis in Ihr Projekt einzufügen, oder auf .min.css herunterladen, um es als Datei zu speichern.
Fehlerhaftes CSS bringt das Werkzeug nicht zum Absturz: Es wird so weit minifiziert, wie es sich lesen lässt. Sie können also auch halbfertigen Code einfügen und ihn danach korrigieren.
CSS komprimieren: Wie viel kleiner wird die Datei?
Das hängt davon ab, wie viele Kommentare und wie viel Leerraum Ihr Stylesheet enthält. Ausführlich kommentierte, sauber eingerückte Dateien schrumpfen oft um ein Viertel bis zur Hälfte. Unter dem Ergebnis sehen Sie für Ihr CSS die genaue Originalgröße, die minifizierte Größe und die Ersparnis in Prozent.
Eine kleinere Datei lädt schneller, und die Seite wird früher dargestellt. Für noch weniger Übertragung kann Ihr Webserver die minifizierte Datei zusätzlich mit gzip oder Brotli ausliefern.
Lizenzkommentare behalten oder entfernen
Kommentare, die mit /*! beginnen, enthalten meist den Lizenz- oder Copyright-Hinweis einer Bibliothek. Sie bleiben standardmäßig erhalten, weil viele Lizenzen verlangen, dass dieser Hinweis mit dem Code weitergegeben wird.
Entfernen Sie unter dem Eingabefeld das Häkchen bei Lizenzkommentare beibehalten, dann fallen auch diese Kommentare weg und Sie erhalten die kleinstmögliche Datei.
CSS minimieren, ohne etwas kaputtzumachen
Minifiziertes CSS eignet sich für den Live-Betrieb, denn es fehlen nur Zeichen, die keinen Einfluss darauf haben, wie der Browser das Stylesheet liest. Bewahren Sie Ihre lesbare Originaldatei als Quelle auf und binden Sie auf der Website die .min.css-Fassung ein, etwa style.css neben style.min.css.
Häufig gestellte Fragen
Was macht ein CSS Minifier?
Ein CSS Minifier entfernt alles, was der Browser zum Lesen Ihrer Styles nicht braucht: Kommentare, Zeilenumbrüche, Einrückungen, Leerzeichen um Klammern, Doppelpunkte und Kommas sowie das letzte Semikolon jeder Regel. Das Ergebnis wirkt genau wie das Original, ist aber kleiner. Die Datei lädt dadurch schneller.
Gibt es einen CSS Minifier online ohne Installation?
Ja, dieser hier läuft vollständig in Ihrem Browser. Sie brauchen weder ein Build-Werkzeug noch ein Konto, und Ihr CSS wird nicht hochgeladen. Einfügen genügt, das Ergebnis erscheint automatisch.
Was ist der Unterschied zwischen CSS komprimieren und CSS minimieren?
Im Alltag meinen beide dasselbe: den Text verkleinern, ohne seine Wirkung zu ändern. Fügen Sie das Stylesheet hier ein und kopieren oder laden Sie das komprimierte Ergebnis herunter. Zusätzlich kann Ihr Webserver die minifizierte Datei mit gzip oder Brotli übertragen.
Wie entferne ich alle Kommentare aus meinem CSS?
Fügen Sie Ihr CSS ein und entfernen Sie das Häkchen bei „Lizenzkommentare beibehalten“. Dann werden alle Kommentare gelöscht, auch solche, die mit /*! beginnen. Lassen Sie das Häkchen gesetzt, bleiben nur diese Lizenzhinweise erhalten.
Ist minifiziertes CSS für die Produktion sicher?
Ja. Es werden nur Zeichen entfernt, die keinen Einfluss darauf haben, wie der Browser das Stylesheet liest. Zeichenketten, url()-Werte und maskierte Zeichen bleiben exakt so erhalten, wie sie im Original stehen. Behalten Sie Ihre Originaldatei als Quelle.
Was ist eine .min.css-Datei?
Eine .min.css-Datei ist die minifizierte Kopie eines Stylesheets. Der Name folgt einer Konvention, damit sie neben der lesbaren Quelle liegt, zum Beispiel style.css und style.min.css. Bearbeiten Sie die lesbare Datei und binden Sie auf der Website die .min.css-Datei ein.
Kann ich minifiziertes CSS wieder lesbar machen?
Ja, aber nicht exakt wie vorher, denn die ursprüngliche Formatierung geht beim Minifizieren verloren. Fügen Sie den minifizierten Code in den Code-Formatierer ein, um ihn neu einzurücken. Entfernte Kommentare kommen nicht zurück, bewahren Sie Ihre Quelldatei also immer auf.
Was passiert mit fehlerhaftem CSS?
Das Werkzeug stürzt nicht ab. Ihr CSS wird so weit minifiziert, wie es sich lesen lässt, sodass Sie auch halbfertigen Code einfügen und später korrigieren können.
Empfohlen
-
Amazon Basics Laptopständer, klappbarBringt den Bildschirm auf Augenhöhe, während du deinen Code aufräumst.
-
Web Performance Fundamentals (Nadia Makarevich)Kleineres CSS ist erst der Anfang: so analysierst und beschleunigst du die ganze Seite.
-
Logitech MX Master 3S Kabellose MausPräzise und leise für lange Tage in der Frontend-Entwicklung.
Hilft, die Tools kostenlos zu halten. ✨
Symbolbilder. Als Amazon-Partner verdiene ich an qualifizierten Verkäufen.
