Formatieren Sie ein Stylesheet zu einem Selektor pro Zeile oder minifizieren Sie es, indem Leerzeichen und Kommentare entfallen, die ein Browser übergeht. Beides sind Textumschreibungen in dieser Seite: Nichts wird hochgeladen, und Zeichenketten, url()-Inhalte und Custom Properties bleiben unverändert.
Läuft lokal in deinem BrowserCSS einfügen und auf Formatieren drücken: Sie erhalten einen Selektor pro Zeile mit Tabulator-Einrückung. Minifizieren entfernt stattdessen die Leerzeichen und Kommentare, die ein Browser ohnehin übergeht. Beides sind reine Textumschreibungen in dieser Seite: Das Stylesheet wird nicht hochgeladen, und es gibt weder Build-Schritt noch Installation oder Konto.
Die Umschreibung ist bewusst zurückhaltend. Werte werden so übernommen, wie sie dastehen — Zeichenketten, url()-Inhalte wie data:-URIs, Attributselektoren, Escape-Sequenzen und Custom Properties werden nie umgebrochen —, und es wird nichts ergänzt: keine fehlenden Semikolons, keine Vendor-Präfixe, keine zusammengefassten Regeln. Zurück kommt Ihr eigenes Stylesheet, nur anders gesetzt.
Formatieren schreibt einen Selektor pro Zeile, rückt jede Verschachtelungsebene mit einem Tabulator ein und stellt jede Deklaration in eine eigene Zeile innerhalb selector { … }. Selektorlisten behalten ihre Kommas, At-Regeln wie @media und @supports behalten ihre Blöcke, und eine leere Regel bleibt leer. Eine Deklaration ohne Semikolon hat auch danach keines, und mehrere Semikolons hintereinander werden zu einem.
Das ist ein Durchgang über Leerraum, kein Stil-Durchgang: Lange Zeilen werden nicht an einer Spalte umbrochen, Deklarationen und Regeln nicht umsortiert, doppelte Deklarationen und Shorthands nicht zusammengeführt, Vendor-Präfixe nicht ergänzt. Ein mit acht Leerzeichen eingerücktes Stylesheet und ein von Hand umbrochenes erhalten dieselbe Tabulator-Einrückung.
Minifizieren zieht Folgen von Leerraum auf ein einzelnes Leerzeichen zusammen, wo CSS eines braucht, und entfernt sie, wo keines nötig ist. Deshalb wird aus .a > .b ein .a>.b und aus red !important ein red!important, während calc(100% - 20px), 1px solid #000 und die Werteliste in rgba(0, 0, 0, .5) die bedeutungstragenden Leerzeichen und Kommas behalten. Tabulatoren und Zeilenumbrüche verschwinden überall außerhalb von Zeichenketten und url()-Inhalten.
Die Ersparnis stammt nur aus Leerraum, Kommentaren und doppelten Semikolons. Eine bereits minifizierte Datei ändert sich kaum: Das 121 KB große Stylesheet von Bootstrap 3.3.7 verliert hier 333 Bytes, weil nichts mehr zu entfernen ist. Eine von Hand eingerückte Datei mit Kommentarbannern gewinnt einige Prozent mehr. Umbenennen von Klassen, Zusammenführen von Regeln und Entfernen ungenutzter Selektoren gehören nicht dazu.
Kommentare entfernen ist standardmäßig aus. Eingeschaltet verschwinden /* … */-Blöcke vor der eigentlichen Arbeit — samt /*! … */-Lizenzbannern, dem einzigen Fall, in dem Minifizieren eine Datei verändert, deren Lizenz sie erhalten möchte. Eigenschaftsnamen kleinschreiben ist voreingestellt und betrifft nur Eigenschaftsnamen: Aus COLOR:RED wird color:RED. Werte behalten ihre Schreibweise, url(X.PNG) bleibt also unverändert, und At-Regelnamen werden ebenfalls nicht angetastet.
Custom Properties sind absichtlich von der Kleinschreibung ausgenommen. --MainColor und var(--MainColor) bezeichnen dieselbe Variable nur, solange die Schreibweise übereinstimmt; würde die Definition zu --maincolor umgeschrieben, liefe jede Referenz ins Leere. Horizontale Anordnung fügt die formatierte Ausgabe so zusammen, dass jede Regel in einer Zeile steht und nach der schließenden Klammer ein Umbruch folgt; Minifizieren ignoriert die Einstellung.
Hinter den beiden Schaltflächen steckt kein CSS-Parser, es wird also nichts geprüft und nichts repariert. Eine fehlende schließende Klammer wird so durchgereicht, wie sie getippt wurde, eine überzählige bleibt stehen, und Text, der gar kein CSS ist — HTML, JavaScript, Fließtext —, kommt unverändert zurück. Ein Stylesheet, das ein Browser akzeptiert, wird auch hier akzeptiert; ein kaputtes kommt kaputt zurück, und zwar an derselben Stelle.
Hochgeladen wird nichts: Das Werkzeug ist ein Skript, das mit der Seite geladen wird. Während der Arbeit geht keine Anfrage hinaus, und ohne Netzverbindung funktioniert es weiter. Praktische Grenze ist die Größe: Ein Stylesheet mit 1,2 MB wird in etwa 130 ms umgeschrieben, doch die Syntaxhervorhebung für den Bildschirm braucht rund 1,7 s — darauf wartet man.