CSS minimieren

So funktioniert es

Fügen Sie Ihr Stylesheet in das linke Feld ein; die minimierte Fassung erscheint sofort rechts. Zuerst fällt alles weg, was der Browser nicht braucht: Zeilenumbrüche, Einrückungen, letzte Semikolons und /* ... */-Kommentare. Dann werden Werte gekürzt: #ffffff wird zu #fff, 0px zu 0, 0.50em zu .5em, bold zu 700. Im vollen Modus geht es einen Schritt weiter: Zwei direkt aufeinanderfolgende .titel-Regeln werden eine Regel, h2- und h3-Regeln mit identischen Deklarationen werden einmal als h2,h3 geschrieben, lange Schreibweisen wie margin: 0px 0px 16px 0px werden zu 0 0 16px, und von einer Eigenschaft, die in einer Regel doppelt steht, fällt die überschriebene weg. Der Beispielcode dieser Seite schrumpft so von 265 auf 145 Byte; die Ergebniszeile nennt diese Werte auch für Ihre eigene Datei. Kommentare mit /*! bleiben standardmäßig stehen, weil viele Open-Source-Lizenzen verlangen, dass dieser Text in der ausgelieferten Datei bleibt. Ist ein Teil des Codes unlesbar, etwa durch eine nie geschlossene Klammer, wird der Rest trotzdem minimiert; die Ergebniszeile warnt mit Zeile und Spalte der ersten Problemstelle.

Dieses Werkzeug ist auch als css minimieren, css minimieren online, css komprimieren, css minifier, css dateigroesse reduzieren, css verkleinern bekannt.

Was ist Minimieren (Minify)?

Minimieren heißt, alle Zeichen zu entfernen, die ein Programm nicht braucht, ohne seine Bedeutung zu ändern. Bei CSS sind das Einrückungen, Zeilenumbrüche, Kommentare und letzte Semikolons, dazu kommen kürzere Schreibweisen wie #fff statt #ffffff. Ziel ist ein kleinerer Download: Stylesheets halten die erste Darstellung einer Seite auf, je kleiner sie sind, desto früher sehen Besucher Inhalt statt einer leeren Fläche.

Was ist csso?

csso (CSS Optimizer) ist der Open-Source-Minimierer, den diese Seite verwendet. Er zerlegt Ihr CSS zuerst in eine Baumstruktur und wendet darauf sichere Umformungen an: Werte kürzen, Regeln mit gleichem Selektor zusammenlegen, überschriebene Deklarationen streichen. Anders als einfache Suchen-und-Ersetzen-Werkzeuge versteht er den Code und fasst daher den Inhalt von Zeichenketten und url(...)-Angaben nicht an.

Voll oder sicher?

In CSS zählt die Reihenfolge: Passen zwei Regeln auf dasselbe Element, gewinnt die spätere. Der volle Modus legt Regeln nur dort zusammen, wo diese Reihenfolge das Ergebnis nicht ändern kann, verschiebt dabei aber unter Umständen Inhalt an eine frühere Stelle der Datei. Auf einer modernen Website mit einem einzigen Stylesheet ist das unbedenklich und liefert das kleinste Ergebnis.

Überschreiben sich auf Ihrer Seite mehrere Stylesheets gegenseitig oder hält ein älteres Theme nur mit !important und Reihenfolge zusammen, wählen Sie Sicher: Anzahl und Reihenfolge der Regeln bleiben exakt, nur das Innere jeder Regel wird verkleinert. Sie sparen einige Prozent weniger, riskieren aber keine überraschende Layoutänderung. Im Zweifel probieren Sie beide Stufen und öffnen Ihre Seite einmal mit der minimierten Datei.

Was Minimieren nicht leistet

Minimieren findet keine ungenutzten Regeln. Eine Regel .altes-banner, die auf Ihrer Seite nichts trifft, steht auch nach dem Minimieren noch da, denn das Werkzeug sieht nur Ihr CSS, nicht Ihr HTML. Tote Regeln finden Sie in den Chrome-Entwicklertools im Tab Coverage.

Liefert Ihr Server Dateien mit gzip oder brotli aus, was die meisten Hoster von selbst tun, ist die tatsächlich übertragene Größe deutlich kleiner als die Zahlen hier. Minimieren lohnt sich trotzdem zusätzlich, denn Kompression kann weder Kommentare löschen noch Werte umschreiben. Bearbeiten Sie die minimierte Datei nicht: Pflegen Sie die eingerückte Quelle und minimieren Sie bei jeder Veröffentlichung neu. Zurück geht es mit dem Werkzeug CSS formatieren, gelöschte Kommentare kommen dabei aber nicht wieder.

Häufige Fragen

Wie minimiere ich eine CSS-Datei?

Fügen Sie das CSS links auf dieser Seite ein. Rechts erscheint es in einer Zeile, ohne Leerraum und Kommentare, mit gekürzten Werten. Kopieren Sie es oder laden Sie es als .min.css-Datei herunter; die Ergebniszeile zeigt die Größe vorher und nachher.

Kann Minimieren meine Website kaputt machen?

Im sicheren Modus nicht: Anzahl und Reihenfolge der Regeln bleiben gleich, nur Abstände und Schreibweisen werden kürzer. Der volle Modus legt Regeln zusammen; bei Websites mit einem Stylesheet ist das unproblematisch, bei älteren Themes mit mehreren sich überschreibenden Dateien kann sich die Darstellung ändern. Öffnen Sie Ihre Seite vor dem Veröffentlichen einmal mit der minimierten Datei.

Warum wurde mein Lizenzkommentar nicht entfernt?

Kommentare mit /*! kennzeichnen üblicherweise Text, den eine Open-Source-Lizenz in der ausgelieferten Datei verlangt; das Werkzeug behält sie deshalb standardmäßig. Ist es Ihr eigener Code, stellen Sie die Option für Lizenzkommentare auf Entfernen.

Wird mein Code irgendwohin hochgeladen?

Nein. Das Minimieren erledigt eine Bibliothek, die in Ihrem Browser läuft; Ihr Code verlässt diese Seite nicht und geht an keinen Server.