CSS formatieren

Mache ein Stylesheet leichter lesbar oder erzeuge eine kompakte Fassung eines CSS-Ausschnitts. Beide Aktionen analysieren die Syntax, statt Leerzeichen und Kommentare blind zu löschen. Zeichenketten mit Semikolons, URLs und calc()-Ausdrücke müssen gültige CSS-Werte bleiben. Ergebnisse erscheinen als Text: Keine Regel wird auf diese Seite angewendet, und Ressourcen aus url() oder @import werden zur Verarbeitung nicht heruntergeladen.

Die Formatierung verwendet ein strukturiertes CSS-Layout mit zwei Leerzeichen Einrückung. Erkannte Blöcke, Deklarationslisten und verschachtelte Regeln werden lesbar dargestellt. Klassennamen, Bezeichner und eigene Eigenschaften werden nicht zur Verkürzung umbenannt.

Der kompakte Modus erzeugt Text aus dem CSS-Syntaxbaum. Er entfernt unnötige Trennzeichen, erhält aber grammatisch notwendige Abstände, etwa bei Operatoren in calc(). Eine Zeichenkette wird nicht wegen eines enthaltenen : oder ; in mehrere Deklarationen zerlegt.

Im kompakten Modus verschwinden gewöhnliche Kommentare. Kommentare mit ! am Anfang oder @license beziehungsweise @preserve bleiben erhalten und werden an den Anfang gestellt. Prüfe Kommentare mit Anweisungen für deine Build-Werkzeuge: Der Formatierer kennt nicht alle Konventionen von Bundlern und Präprozessoren.

Die Syntaxanalyse bestätigt weder Eigenschaftswerte noch das Rendering. Auch unbekannte Eigenschaften, nicht unterstützte Werte oder wirkungslose Regeln können syntaktisch lesbar sein. Das Formular verarbeitet CSS und kompiliert weder Sass/SCSS noch Less. Es prüft Selektoren nicht gegen dein DOM und berechnet keine tatsächlich angewendeten Stile.

Prüfe die gestaltete Seite nach dem Einfügen in die Anwendung. Syntaktisch akzeptiertes CSS kann weiterhin nicht verfügbare Variablen oder unpassende Selektoren enthalten.