CSS formatieren und minimieren
CSS Beautifier & Minifier
Formatiert oder minimiert CSS, ohne etwas umzusortieren – der Token-Strom bleibt exakt erhalten.
Verschönert ein Stylesheet, damit Sie es lesen können, oder streicht es zusammen, wenn Sie es kleiner wollen. Beide Richtungen werden bei jedem Durchlauf gegen den Token-Stream geprüft, sodass die Ausgabe Ihr Stylesheet mit anderem Whitespace ist und sonst nichts – kein Zusammenlegen von Kurzschreibweisen, kein Kürzen von Farben, kein Umsortieren von Regeln.
CSS-Eingabe
.css-Datei hier ablegen
Wird in diesem Tab gelesen. Nichts wird hochgeladen.
Formatiert
Regeln
5
Selektoren
9
Deklarationen
9
At-Regeln
1
Benutzerdefinierte Eigenschaften
2
So funktioniert es
Fügen Sie das CSS ein oder legen Sie eine Datei ab
Verschachtelte At-Regeln, Custom Properties, `:is()` und moderne Selektoren werden alle geparst. Die Statistikleiste unter den Panels zählt Regeln, Selektoren, Deklarationen und Custom Properties, während Sie tippen.
Verschönern Sie mit dem Layout, das Sie verwenden
Einrückungsbreite, ein Selektor pro Zeile oder mehrere, eine Leerzeile zwischen Regeln, Kommentare behalten oder entfernen. Das sind die vier Dinge, über die Stylesheets tatsächlich uneins sind.
Oder minimieren Sie, und behalten Sie den Lizenzkopf
Die `/*!`-Konvention markiert einen Kommentar, der das Minimieren überleben muss. Der Schalter respektiert sie, und die Zahlen vorher/nachher/gespart sagen Ihnen, ob es sich überhaupt gelohnt hat.
Häufige Fragen
Warum kürzt es `#ffffff` nicht zu `#fff`?
Weil es zu jeder „sicheren“ Umschreibung ein Stylesheet gibt, in dem sie es nicht ist. Farben kürzen, Kurzschreibweisen zusammenlegen, Deklarationen umsortieren und „redundante“ Regeln entfernen ändern jeweils irgendwo das Verhalten, und ein Minimierer, der stillschweigend eine Seite kaputt macht, ist schlechter als einer, der weniger Bytes spart. Gzip holt ohnehin den größten Teil des Unterschieds wieder herein.
Was sind die „lexikalischen Probleme“, die es meldet?
Stellen, aus denen der Tokenizer nicht schlau wurde – ein nicht geschlossener Kommentar, ein String, der bis zum Dateiende läuft, eine verirrte Klammer. Sie werden mit einem Byte-Offset gemeldet, und der Formatierer macht weiter, denn ein Stylesheet mit einer kaputten Regel ist immer noch lesenswert.
Fügt es Vendor-Präfixe hinzu?
Nein. Präfixe brauchen ein Browser-Support-Ziel und eine Datenbank dessen, was jede Property verlangt, und beides ändert sich monatlich. Das ist die Aufgabe von Autoprefixer, und der braucht einen Build-Schritt, um sie ehrlich zu erledigen.
Übersteht es eine URL, die ein Semikolon enthält?
Ja – `url(dots;grid.png)` und ein `content: "{ not a block; }"`-String werden beide als einzelne Werte tokenisiert, statt an der Interpunktion in ihrem Inneren aufgeteilt zu werden. Dieser Fall steht genau deshalb im Beispiel auf der Seite, weil naive Formatierer ihn falsch machen.
Eingabe aus
Sprite-Sheet-Packer
Sprite Sheet Packer
Packt viele Bilder in einen Atlas und gibt dazu die CSS- oder JSON-Frame-Map aus.
HTML formatieren und minimieren
HTML Beautifier & Minifier
Formatiert oder minimiert HTML, bewahrt Inline-Elemente und fasst auf Wunsch Leerraum zusammen.
JavaScript formatieren und minimieren
JavaScript Beautifier & Minifier
Entfernt Kommentare und Leerraum aus JavaScript oder TypeScript, ohne etwas umzubenennen, und rückt ein minimiertes Bundle wieder lesbar ein.
CSS-Verlaufsgenerator
CSS Gradient Builder
Baut lineare, radiale und konische Verläufe mit verschiebbaren Stopps und gibt das CSS aus, in sRGB oder OKLCH.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
CSS-Token-Extraktor
CSS Token Extractor
Zieht Farben, Abstände, Radien und Schriften aus einem Stylesheet und schlägt einen Satz Custom Properties vor.
HTML formatieren und minimieren
HTML Beautifier & Minifier
Formatiert oder minimiert HTML, bewahrt Inline-Elemente und fasst auf Wunsch Leerraum zusammen.
JavaScript formatieren und minimieren
JavaScript Beautifier & Minifier
Entfernt Kommentare und Leerraum aus JavaScript oder TypeScript, ohne etwas umzubenennen, und rückt ein minimiertes Bundle wieder lesbar ein.
SVG als CSS-Data-URI
SVG to CSS Data URI
Kodiert ein SVG als CSS-Hintergrund-Data-URI und maskiert nur, was maskiert werden muss, damit es klein bleibt.
Base64 kodieren und dekodieren
Base64 Encoder & Decoder
Kodiert und dekodiert Base64 und Base64URL für Text oder Dateien und behandelt UTF-8 korrekt.
curl in Code
curl to Code
Wandelt einen curl-Befehl in fetch, axios, Python requests, Go, PHP oder PowerShell um.