TanodTools
DE

CSS minifizieren und verschönern

Fügen Sie ein Stylesheet ein, um es für die Produktion zu verkleinern oder lesbar zu gestalten, und sehen Sie, wie viele Bytes Sie sparen.

Läuft vollständig in Ihrem Browser

Modus
Kommentare

Eingabe bis etwa 10 MB. Es werden nur Leerraum und Kommentare entfernt; Regeln werden nicht zusammengeführt, Werte nicht umgeschrieben und ungenutztes CSS nicht entfernt.

So minifizieren oder verschönern Sie CSS

  1. Fügen Sie Ihr CSS in das Feld ein oder klicken Sie auf Beispiel einfügen.
  2. Wählen Sie Minifizieren, um es zu komprimieren, oder Verschönern, um es mit Ihrer Einrückung zu gestalten. Setzen oder entfernen Sie beim Minifizieren den Haken für Lizenzkommentare.
  3. Prüfen Sie die eingesparte Größe und kopieren Sie dann das Ergebnis oder laden Sie es als .css-Datei herunter.

CSS minifizieren, ohne es kaputt zu machen

Ein Stylesheet zu minifizieren heißt, alles zu entfernen, was der Browser ignoriert: Kommentare, Einrückungen, Zeilenumbrüche und die Leerzeichen um Satzzeichen. Kleinere Dateien werden schneller geladen und geparst, und bei einem großen Stylesheet beträgt die Ersparnis vor der Komprimierung oft ein Viertel bis die Hälfte der Größe. Die Regeln und ihre Reihenfolge bleiben genau so, wie sie geschrieben sind.

Knifflig ist zu wissen, welchen Leerraum der Browser ignoriert. Ein Leerzeichen zwischen zwei Selektoren, wie in nav a, ist ein Kombinator mit der Bedeutung „beliebiger Nachfahre“, also sind nav a und nava zwei verschiedene Dinge. Innerhalb von calc(1rem + 2px) sind die Leerzeichen um + Pflicht, und calc(1rem+2px) ist ungültig. Text in Anführungszeichen und in url() ist Daten, keine Syntax. Ein Minifier aus regulären Ausdrücken macht oft bei einem dieser Punkte einen Fehler; dieser hier liest das Stylesheet als Folge von Tokens und entfernt Leerraum nur dort, wo die Grammatik ihn optional macht.

Verschönern ist die Gegenrichtung: eine Deklaration pro Zeile, eingerückt innerhalb der Klammern, sodass aus einer minifizierten Datei von einem CDN etwas wird, das Sie lesen und vergleichen können.

Tipps

Häufige Fragen

Wird mein CSS hochgeladen?

Nein. Das Minifizieren läuft in Ihrem Browser, und die Bibliothek zum Verschönern wird nur dann von dieser Website geladen, wenn Sie Verschönern wählen. Ihr Stylesheet wird nie irgendwohin gesendet.

Was genau ändert Minifizieren?

Es entfernt Kommentare und den Leerraum um geschweifte Klammern, Semikolons, Kommas und Kombinatoren (>, ~, +) und streicht das letzte Semikolon in jedem Block. Erhalten bleibt das Leerzeichen in a b (dem Nachfahren-Kombinator), in and (min-width: ...) und um + und - innerhalb von calc(), clamp(), min() und max(), wo sein Entfernen den Wert kaputt machen würde.

Werden Strings und url() angetastet?

Nein. Alles in Anführungszeichen, auch Text, der wie ein Kommentar oder eine Klammer aussieht, und der Inhalt von url() werden Zeichen für Zeichen übernommen.

Werden Farben oder Zahlen gekürzt?

Nein. Werte wie #336699, 0.5em und 0px bleiben wie geschrieben. Solche Umschreibungen sparen wenig und bergen ein gewisses Risiko, deshalb verschwinden nur Leerraum und Kommentare.

Woher weiß ich, dass das minifizierte CSS sicher ist?

Nach jedem Durchlauf parst die Seite Ihr Original und das Ergebnis mit dem browsereigenen CSS-Parser und vergleicht, was er liest. Unterscheiden sie sich, erscheint über dem Ergebnis ein Hinweis. Eine Übereinstimmung bedeutet, dass der Browser dieselben Regeln sieht.

Was sind Lizenzkommentare?

Kommentare, die mit /*! beginnen, werden von Minifiern üblicherweise behalten, weil sie Copyright- oder Lizenztext enthalten, den eine Lizenz Sie unter Umständen beizubehalten verpflichtet. Schalten Sie die Option aus, um auch sie zu entfernen.