CSS-Minifizierer — Lizenzkommentare und CSS-Variablen bleiben erhalten

Einleitung

Geschriebenes CSS und ausgeliefertes CSS müssen nicht gleich aussehen. Während Sie an einem Stylesheet arbeiten, machen Einrückungen, Leerzeilen zwischen Regeln und Kommentare, die erklären, warum eine Regel existiert, den Code leichter lesbar und wartbar. Für die Darstellung im Browser bringt das alles nichts – ein Browser braucht nur gültige Selektoren, Eigenschaften und Werte und kümmert sich nicht um Abstände oder Erklärungen. Beim Minifizieren wird alles entfernt, was ausschließlich für menschliche Leser da ist, sodass dieselben Regeln in einer kleineren Datei beim Browser ankommen. Bei einem kurzen Stylesheet macht die Ersparnis vielleicht nur ein paar Kilobyte aus; bei einem, das über ein längeres Projekt hinweg gewachsen ist, mit mehreren Bearbeitungsrunden und liegen gebliebenen Testkommentaren, kann es eine spürbare Reduzierung dessen sein, was heruntergeladen werden muss, bevor die Seite korrekt dargestellt wird.

Wie dieses Tool Ihr CSS minifiziert

CSS einzufügen und auf Minifizieren zu klicken bewirkt mehr als nur das Löschen von Leerzeichen:

• Kommentare werden entfernt – mit einer Ausnahme. Ein Kommentar, der die gängige /*! ... */-Konvention verwendet oder das Wort @license oder @preserve enthält, bleibt erhalten. So kennzeichnet man einen Kommentar üblicherweise als Lizenz- oder Urheberhinweis, der von Build-Tools nicht entfernt werden soll. Ein gewöhnlicher erklärender Kommentar wie /* button hover state */ wird entfernt – wenn Sie einen Lizenzhinweis behalten möchten, schreiben Sie ihn in einer dieser Formen.
• Leerzeichen, Zeilenumbrüche und leere Regeln werden entfernt. Alles, was nicht gebraucht wird, um ein Token vom nächsten zu trennen, wird gestrichen, und ein übrig gebliebener leerer Regelblock (ein Selektor wie .old-banner {} ohne Inhalt) wird komplett gelöscht, statt als totes Gewicht liegen zu bleiben.
• Manche Werte werden gekürzt, ohne ihre Bedeutung zu ändern. Eine Farbe wie #ffffff wird zu #fff, überflüssige Nullen werden entfernt (0.500 wird zu .5, ein Wert wie -0px wird zu 0), und die Schlüsselwörter normal und bold für font-weight werden in ihre numerischen Entsprechungen 400 und 700 umgewandelt.
• CSS-Custom-Properties und calc()-Ausdrücke werden geschützt. Variablen mit einem ---Präfix (zum Beispiel --brand-color) und calc()-Ausdrücke sind auf Zeichensetzung und Abstände angewiesen, die kaputtgehen würden, wenn sie wie ein gewöhnlicher Wert komprimiert würden. Deshalb werden sie vor den Schritten zum Entfernen von Leerzeichen und Nullen beiseitegelegt und danach unverändert wiederhergestellt.

Was Sie vor dem Minifizieren wissen sollten

Dieses Tool sortiert Ihre Regeln nicht um, führt sie nicht zusammen und entfernt keine Duplikate – die Ausgabe enthält dieselben Selektoren in derselben Reihenfolge, nur kompakter. Wenn Sie etwas suchen, das CSS entfernt, das Ihre Seite gar nicht verwendet, brauchen Sie ein anderes Werkzeug als einen Minifizierer. Da die Minifizierung hier durch das Entfernen von Leerzeichen und das Kürzen von Werten funktioniert und nicht durch eine Neuinterpretation der Regelstruktur, bleibt verschachtelter Inhalt wie die Regeln innerhalb einer @media-Abfrage erhalten, wobei sein Inhalt genauso komprimiert wird wie alles andere.

Es gibt kein separates Dateigrößenlimit wie bei den Datei-Upload-Tools dieser Website – Sie fügen den Text direkt ein, statt eine Datei hochzuladen. Die praktische Obergrenze ist also das, was Ihr Browser in einem Textfeld noch komfortabel verarbeitet, was für jedes Stylesheet reicht, an dem Sie realistischerweise von Hand arbeiten würden. Für ein wirklich großes Stylesheet, etwa ein komplettes Framework-Bundle statt der eigenen Styles eines Projekts, ist ein Build-Schritt im Rahmen Ihres Deployment-Prozesses meist besser geeignet als das Einfügen in ein Browser-Tool.

Die Minifizierung ändert nichts an dem, was Ihr CSS tut, aber es lohnt sich trotzdem, vor der Veröffentlichung oder Abgabe kurz eine Seite mit der minifizierten Ausgabe anzusehen – dieselbe Gewohnheit wie das Korrekturlesen von allem anderen, bevor es rausgeht.

Wann dieses Tool das richtige ist

• Ein Schulprojekt oder eine private Website für die Veröffentlichung vorbereiten. Eine kleinere CSS-Datei lädt schneller, was in einem Schulnetzwerk oder auf einem Smartphone mit mobilen Daten mehr ausmacht, als man denkt.
• Sehen, wie Produktionscode tatsächlich aussieht. Ein Blick in den Quellcode einer echten Website zeigt oft CSS, das mit dem, was Schüler im Unterricht schreiben, kaum etwas zu tun hat – das eigene Stylesheet zu minifizieren und direkt mit dem Original zu vergleichen, macht konkret sichtbar, warum das so ist, und passt gut zu CSS Beautifier für den umgekehrten Weg.
• Seitengewicht vor einem Abgabetermin oder bei Hosting mit begrenzter Bandbreite reduzieren. Manches schulisch bereitgestellte Hosting hat enge Speicher- oder Transferlimits; Assets vor dem Hochladen zu minifizieren, ist eine schnelle Möglichkeit, darunter zu bleiben.

Wenn Sie ein Stylesheet noch aktiv bearbeiten, arbeiten Sie weiter mit der lesbaren Version und minifizieren Sie erst kurz vor der Veröffentlichung – Minifizieren ist ein letzter Schritt, kein Arbeitsformat. Ein umfassenderes Bild davon, warum die Dateigröße für die Seitengeschwindigkeit wichtig ist, bietet dieser Leitfaden zum CSS-Compressor für schnellere Websites.

Beispiel

Ein Schüler stellt eine private Website für einen Webdesign-Kurs fertig: separate Stylesheets für Layout, Farbschema und responsive Regeln, jedes mit Kommentaren, die vom Ausprobieren verschiedener Ideen übrig geblieben sind. Vor der Abgabe fügt er das CSS zusammen und fügt es in dieses Tool ein. Die Seite sieht danach genauso aus und verhält sich genauso, aber die ausgelieferte Datei ist kleiner und enthält die Versuch-und-Irrtum-Kommentare aus der Bauphase nicht mehr.

Häufig gestellte Fragen

Verändert die Minifizierung, wie meine Seite aussieht?

Nein. Regeln, Selektoren und Werte bleiben erhalten – es ändern sich nur Formatierung, Kommentare und einige wenige Wertkürzungen (wie Hex-Farben und überflüssige Nullen), die keinen Einfluss auf die Darstellung haben.

Was passiert mit Kommentaren in meinem CSS?

Gewöhnliche Kommentare werden entfernt. Ein Kommentar in der Form /*! ... */ oder mit @license oder @preserve bleibt erhalten – das ist die übliche Konvention, um einen Lizenz- oder Urheberhinweis zu kennzeichnen.

Werden CSS-Variablen und calc() unterstützt?

Ja. Custom Properties und calc()-Ausdrücke werden bei der Minifizierung geschützt, statt wie gewöhnliche Werte komprimiert zu werden.

Gibt es ein Größenlimit?

Kein festes Limit wie bei den Datei-Upload-Tools dieser Website – Sie fügen Text ein, statt eine Datei hochzuladen. Sehr große Textmengen (zum Beispiel ein komplettes Library-Bundle) werden besser von einem Build-Tool im Rahmen Ihres Deployment-Prozesses verarbeitet.

Wird mein Code irgendwo gespeichert?

Nein. Das eingefügte CSS wird verarbeitet, um das minifizierte Ergebnis zu erzeugen, aber weder als Datei gespeichert noch anschließend aufbewahrt; erfasst wird nur, dass das Tool genutzt wurde, nicht der Code selbst.

Kann ich mehrere Stylesheets gleichzeitig minifizieren?

Fügen Sie jeweils einen CSS-Block ein und minifizieren Sie ihn. Führen Sie mehrere Dateien vorher zusammen, wenn Sie sie gemeinsam minifiziert brauchen, oder wiederholen Sie den Vorgang für jede einzeln.

Welche verwandten Tools kann ich nutzen?

Nutzen Sie CSS Beautifier, um den Vorgang umzukehren und minifiziertes CSS wieder lesbar zu machen, oder HTML Minifier und JavaScript Beautifier für andere Code-Aufgaben.