Anleitung

Fügen Sie CSS in das Eingabefeld ein, öffnen Sie eine .css-Datei oder probieren Sie das Beispiel aus.
Wählen Sie Beautify für lesbaren Code oder Minify für die kleinste Ausgabe.
Wählen Sie beim Beautify 2 Leerzeichen, 4 Leerzeichen oder Tabs.
Kopieren Sie das Ergebnis oder laden Sie es als .css-Datei herunter. Wenn Klammern oder Anführungszeichen nicht ausgeglichen sind, zeigt der Fehler Zeile und Spalte an.

So funktioniert es

Der Formatierer zerlegt das Stylesheet zunächst in Token: Zeichenketten in einfachen oder doppelten Anführungszeichen, url(…)-Werte, Kommentare, geschweifte Klammern und Semikolons. Da Zeichenketten und url() einzelne Token sind, verwirren ein Semikolon in einer Data-URI oder eine geschweifte Klammer in content: „{ }“ die Struktur nie, und ihr Inhalt wird exakt kopiert.

Beautify setzt jeden Selektor einer Selektorliste in eine eigene Zeile, fügt Leerzeichen um die Kind-, Geschwister- und Nachbar-Kombinatoren (>, ~, +) ein und schreibt jede Deklaration als „property: value;“ in eine eigene Zeile. Blöcke innerhalb von @media, @supports, @layer, @container und nativer CSS-Verschachtelung werden pro Tiefe um eine Ebene eingerückt. Ein fehlendes Semikolon nach der letzten Deklaration eines Blocks wird ergänzt. Kommentare bleiben an ihrem Platz.

Minify entfernt Kommentare (außer /*! … */-Lizenzhinweise), reduziert Leerraum, entfernt Leerzeichen um Klammern, Doppelpunkte, Semikolons, Kommas und Selektor-Kombinatoren und lässt das Semikolon vor jeder schließenden geschweiften Klammer weg. Leerzeichen, die die Bedeutung verändern, bleiben erhalten: der Nachfahren-Kombinator in „.a .b“, das Leerzeichen in „a :focus“ und die Leerzeichen innerhalb von Werten wie calc(100% - 2px). „! important“ wird zu „!important“ normalisiert.

Das Tool schreibt Werte nicht um: Farben, Einheiten und Nullen bleiben wie geschrieben, und Regeln werden nicht zusammengeführt oder umsortiert. SCSS- oder Less-Dateien mit einfacher Verschachtelung funktionieren in der Regel, aber ihre eigene Syntax wie //-Zeilenkommentare oder Mixins wird nicht verstanden.

Beispiele

Eine minifizierte Framework-Datei lesen

Fügen Sie einen einzeiligen bootstrap.min.css-Auszug ein und wählen Sie „Beautify“ mit 2 Leerzeichen, um jede Regel, die Media Queries und ihre verschachtelten Regeln in separaten, eingerückten Zeilen zu sehen.

Ein handgeschriebenes Stylesheet ausliefern

Minifizieren Sie ein 12-KB-Stylesheet mit Kommentaren und Einrückungen, bevor Sie es inline in eine E-Mail-Vorlage oder einen Seitenkopf einfügen. Die Zusammenfassung zeigt die Zeichenanzahl vorher und nachher.

Eine fehlende geschweifte Klammer finden

Ein Stylesheet wird ab der Mitte nicht mehr angewendet. Der Formatierer meldet „Diese { wird nie mit einer passenden } geschlossen“ mit der Zeile der Regel, der die schließende geschweifte Klammer fehlt.

Häufig gestellte Fragen

Ist minifiziertes CSS aus diesem Tool sicher für den Produktiveinsatz?

Es entfernt nur Kommentare und Leerzeichen, die CSS ignoriert, sodass die Regeln sich gleich verhalten. Es führt nicht die tiefergehenden Optimierungen von Build-Tools wie das Zusammenführen von Regeln oder das Kürzen von Farben durch, sodass das Ergebnis etwas größer sein kann als deren.

Warum wird in „a :focus“ ein Leerzeichen beibehalten?

In einem Selektor ist ein Leerzeichen der Nachfahren-Kombinator. „a :focus“ bedeutet ein fokussiertes Element innerhalb eines Links, während „a:focus“ einen fokussierten Link bedeutet. Das Entfernen dieses Leerzeichens würde ändern, welche Elemente übereinstimmen.

Kann es SCSS oder Less formatieren?

Einfache verschachtelte Regeln werden korrekt formatiert. Preprocessor-spezifische Syntax wie //-Kommentare, Mixins mit Argumenten oder @if-Blöcke wird nicht verstanden und kann seltsam formatiert werden; überprüfen Sie daher das Ergebnis.

Werden Lizenzkommentare beim Minifizieren entfernt?

Kommentare, die mit /*! beginnen, werden beibehalten, was die übliche Konvention für Lizenz- und Urheberrechtshinweise ist. Alle anderen Kommentare werden entfernt.

Datenschutz

Ihr CSS wird nur in Ihrem Browser verarbeitet. Es wird nichts hochgeladen, gespeichert oder in Analysen einbezogen.