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 den Regeln und Kommentare, die den Zweck einer Regel erklären, den Code lesbarer und wartbarer. Für die Darstellung im Browser bringt das alles nichts — ein Browser braucht nur gültige Selektoren, Eigenschaften und Werte und kümmert sich weder um Abstände noch darum, ob eine Regel erklärt ist. Beim Minimieren fällt alles weg, was ausschließlich für menschliche Leser da ist, sodass dieselben Regeln in einer kleineren Datei beim Browser ankommen. Bei einem kurzen Stylesheet sind das vielleicht ein paar Kilobyte; bei einem, das über ein längeres Projekt hinweg gewachsen ist, mit mehreren Überarbeitungsrunden und übrig gebliebenen Kommentaren aus der Testphase, kann es spürbar weniger sein, was geladen werden muss, bevor die Seite korrekt erscheint.

Wie dieses Werkzeug Ihr CSS minimiert

CSS einfügen und auf „Minimieren“ klicken bewirkt mehr, als nur Leerzeichen zu löschen:

• Kommentare werden entfernt, mit einer Ausnahme. Ein Kommentar in der verbreiteten Schreibweise /*! ... */ oder mit dem Wort @license beziehungsweise @preserve bleibt erhalten. So kennzeichnet man üblicherweise einen Lizenz- oder Urhebervermerk, den Build-Werkzeuge nicht entfernen sollen. Ein gewöhnlicher Erklärkommentar wie /* button hover state */ verschwindet dagegen — wenn Sie einen Lizenzkopf behalten möchten, schreiben Sie ihn in einer der genannten Formen.
• Leerzeichen, Zeilenumbrüche und leere Regeln werden entfernt. Alles, was nicht gebraucht wird, um ein Token vom nächsten zu trennen, fällt weg, und ein übrig gebliebener leerer Regelblock (ein Selektor wie .old-banner {} ohne Inhalt) wird ganz gelöscht, statt als Ballast mitgeschleppt zu werden.
• Manche Werte werden gekürzt, ohne ihre Bedeutung zu verändern. Aus einer Farbe wie #ffffff wird #fff, überflüssige Nullen fallen weg (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 durch ihre Zahlenwerte 400 und 700 ersetzt.
• CSS-Custom-Properties und calc()-Ausdrücke bleiben geschützt. Variablen mit dem Präfix -- (zum Beispiel --brand-color) und calc()-Ausdrücke leben von Satzzeichen und Abständen, die zerbrechen würden, presste man sie wie einen gewöhnlichen Wert zusammen. Sie werden deshalb vor dem Entfernen der Leerzeichen und dem Kürzen der Nullen beiseitegelegt und anschließend unverändert wieder eingesetzt.

Was Sie vor dem Minimieren wissen sollten

Dieses Werkzeug sortiert, verschmilzt oder entdoppelt Ihre Regeln nicht — die Ausgabe enthält dieselben Selektoren in derselben Reihenfolge, nur kompakter. Wenn Sie etwas suchen, das CSS entfernt, welches Ihre Seite gar nicht verwendet, brauchen Sie eine andere Art von Werkzeug als einen Minimierer. Da hier durch das Streichen von Leerraum und das Kürzen von Werten minimiert wird und nicht durch ein Neuinterpretieren der Regelstruktur, bleibt verschachtelter Inhalt wie die Regeln innerhalb einer @media-Abfrage an Ort und Stelle; sein Inhalt wird genauso kompaktiert wie alles andere.

Eine eigene Größenbeschränkung wie bei den Datei-Upload-Werkzeugen auf dieser Website gibt es nicht — Sie fügen Text direkt ein, statt eine Datei hochzuladen, die praktische Grenze ist also das, was Ihr Browser in einem Textfeld noch bequem verkraftet. Das deckt jedes Stylesheet ab, an dem Sie realistischerweise von Hand arbeiten. Bei einem wirklich großen Stylesheet, etwa einem kompletten Framework-Bundle statt der eigenen Styles einer Seite oder eines Projekts, passt ein Build-Schritt im Rahmen Ihres Deployments meist besser als ein Browser-Werkzeug zum Einfügen.

Am Verhalten Ihres CSS ändert das Minimieren nichts, trotzdem lohnt sich ein kurzer Blick auf eine Seite mit der minimierten Ausgabe, bevor Sie veröffentlichen oder abgeben — dieselbe Gewohnheit wie das Korrekturlesen vor dem Absenden.

Wann dieses Werkzeug das richtige ist

• Ein Klassenprojekt oder eine eigene Website zur Veröffentlichung vorbereiten. Eine kleinere CSS-Datei lädt schneller, und das fällt im Schulnetz oder auf dem Handy im Mobilfunknetz stärker ins Gewicht, als man denkt.
• Sehen, wie Produktivcode tatsächlich aussieht. Wer den Quelltext einer echten Website ansieht, findet dort oft CSS, das mit dem im Unterricht Geschriebenen wenig gemeinsam hat — das eigene Stylesheet zu minimieren und direkt neben dem Original zu vergleichen, macht den Grund dafür greifbar und ergänzt sich gut mit CSS Beautifier für den umgekehrten Weg.
• Seitengewicht vor einem Abgabetermin oder bei knappem Hosting reduzieren. Manches von der Schule gestellte Hosting hat enge Speicher- oder Transfergrenzen; Assets vor dem Hochladen zu minimieren ist ein schneller Weg, darunter zu bleiben.

Solange Sie ein Stylesheet noch aktiv bearbeiten, arbeiten Sie mit der lesbaren Fassung weiter und minimieren Sie erst ganz zum Schluss, kurz vor der Veröffentlichung — Minimieren ist ein letzter Schritt, kein Arbeitsformat. Warum die Dateigröße für das Tempo einer Seite zählt, steht ausführlicher in diesem Leitfaden zum CSS-Kompressor für schnellere Websites.

Beispiel

Eine Schülerin stellt für den Webdesign-Unterricht eine persönliche Website fertig: getrennte Stylesheets für Layout, Farbschema und responsive Regeln, jedes mit Kommentaren, die beim Ausprobieren verschiedener Ideen liegen geblieben sind. Vor der Abgabe führt sie das CSS zusammen und fügt es in dieses Werkzeug ein. Die Seite sieht danach genauso aus und verhält sich genauso, aber die Datei, die mitgeliefert wird, ist kleiner und enthält die Versuchskommentare aus der Bauphase nicht mehr.

FAQs

Verändert das Minimieren das Aussehen meiner Seite?

Nein. Regeln, Selektoren und Werte bleiben erhalten — nur Formatierung, Kommentare und einige Wertkürzungen (etwa bei Hex-Farben und überflüssigen Nullen) ändern sich, und davon wirkt sich nichts auf die Darstellung aus.

Was passiert mit den Kommentaren in meinem CSS?

Gewöhnliche Kommentare werden entfernt. Ein Kommentar in der Form /*! ... */ oder mit @license beziehungsweise @preserve bleibt erhalten — so kennzeichnet man üblicherweise einen Lizenz- oder Urhebervermerk.

Kommt es mit CSS-Variablen und calc() zurecht?

Ja. Custom Properties und calc()-Ausdrücke werden beim Minimieren geschützt, statt wie gewöhnliche Werte zusammengepresst zu werden.

Gibt es eine Größenbeschränkung?

Keine feste Grenze wie bei den Datei-Upload-Werkzeugen auf dieser Website — Sie fügen Text ein, statt eine Datei hochzuladen. Sehr große Einfügungen, etwa ein komplettes Bibliotheks-Bundle, sind bei einem Build-Werkzeug im Rahmen Ihres Deployments besser aufgehoben.

Wird mein Code irgendwo gespeichert?

Nein. Das eingefügte CSS wird verarbeitet, um das minimierte Ergebnis zu erzeugen, und danach weder als Datei abgelegt noch aufbewahrt; festgehalten wird nur, dass das Werkzeug benutzt wurde, nicht der Code selbst.

Kann ich mehrere Stylesheets auf einmal minimieren?

Fügen Sie immer nur einen CSS-Block ein und minimieren Sie ihn. Wenn Sie mehrere Dateien gemeinsam minimiert haben möchten, führen Sie sie vorher zusammen, oder wiederholen Sie den Vorgang für jede Datei einzeln.

Welche verwandten Werkzeuge kann ich nutzen?

Mit CSS Beautifier machen Sie den Vorgang rückgängig und minimiertes CSS wieder lesbar; HTML Minifier und JavaScript Beautifier helfen bei anderen Code-Aufgaben.