CSS-Formatierung

Ein CSS-Formatierer liest ein Stylesheet und schreibt es mit konsistenten Abständen, Einrückungen und Zeilenumbrüchen neu, sodass es leicht zu lesen und zu pflegen ist. Es analysiert das CSS in seine zugrunde liegende Struktur aus Regeln, Selektoren, Deklarationen, At-Regeln und Kommentaren und druckt dann diese Struktur mithilfe eines vorhersehbaren Layouts wieder aus: eine Deklaration pro Zeile, ein einzelnes Leerzeichen nach jedem Doppelpunkt und jeder verschachtelte Block wird eine Ebene tiefer als sein übergeordnetes eingefügt. Die Stilregeln bleiben identisch, aber eine Datei, die als eine lange, ununterbrochene Zeile angekommen ist, wird zu etwas, das Sie scannen und bearbeiten können.

Das gleiche Tool funktioniert umgekehrt wie ein CSS-Minifier. Minifying strips every space, tab, line break, and (optional) comment that a browser not need, collaping the stylesheet to the slest byte-for-byte equivalent Ein gut formatiertes 6 KB Stylesheet fällt oft unter 4 KB, sobald Whitespace weg ist, was weniger Bytes über das Netzwerk und eine schnellere erste Lackierung bedeutet Verschönern, während Sie schreiben und debuggen; minifizieren Sie die Kopie, die Sie zur Produktion liefern.

Dieser Formatierer versteht die Teile von CSS, die naive Find-and-Replace-Skripte auslösen. Verschachtelte At-Rules wie @media und @supports halten ihre inneren Regeln korrekt eingerückt, @keyframes-Blöcke mit Prozentschritten bleiben erhalten, String-Literale in Inhalten und URL()-Werten bleiben genau so wie geschrieben und Kommentare werden auf Anfrage beibehalten oder entfernt. Alles läuft vollständig in Ihrem Browser, sodass Ihr Stylesheet, einschließlich aller proprietären Design-Token oder internen Klassennamen, nie hochgeladen wird und das Tool auch nach dem Laden der Seite weiter funktioniert auch ohne Verbindung.

Ein kleiner Test zeigt, was dieser CSS-Formatierer online macht Fügen Sie @media (max-width:600px) {.nav a,.nav button{padding:8px 12px;color:#333}} ein und klicken Sie auf Verschönern mit 2 Leerzeichen Die Medienabfrage öffnet einen eigenen Block, .nav a und.nav button gehen auf separate Zeilen eine Ebene hinein, und jede Deklaration sitzt auf einer eigenen Zeile mit einem Leerzeichen nach dem Doppelpunkt. Das Größenabzeichen lautet 73 B → 98 B, +34%, da die Einrückung Bytes hinzufügt Klicken Sie auf diese Ausgabe minifizieren und sie kehrt zu den ursprünglichen 73 Bytes zurück.