CSS-Formatierungstool

Der CSS-Formatter bringt Stylesheets in eine einheitliche, besser lesbare Struktur. Selektoren, Eigenschaften, Media Queries, Keyframes, Variablen und verschachtelte Präprozessor-Ausgaben lassen sich so leichter prüfen als in komprimiertem oder unregelmäßig eingerücktem Code. Das hilft bei Debugging, Review, Design-System-Pflege, Unterricht und beim Verständnis fremder Styles. Formatierung ändert jedoch nicht automatisch die Kaskade, Spezifität oder Browserkompatibilität. Eine scheinbar kleine Regel kann weiterhin große Auswirkungen haben, wenn sie spät geladen wird oder einen sehr starken Selektor besitzt. Für produktive Änderungen sollten Layout, responsive Zustände und bestehende Lint- oder Build-Regeln geprüft werden. Besonders bei produktiven Daten oder Codebasen sollte das Ergebnis anschließend mit Parser, Tests oder Projektregeln geprüft werden.

CSS-Formatierung ist ein Tokenisierungs- und Pretty-Printing-Problem, kein vollständiger Parse. Ein spezifikationskonformer CSS-Parser (CSS Syntax Module Level 3, W3C Recommendation) ist schwerer als ein Formatter benötigt: Er baut einen AST mit Style-Regeln, At-Regeln, Deklarationen und Komponentenwerten und löst Parsing-Edge-Cases auf (nicht abgeschlossene Strings, nicht passende geschweifte Klammern, vendor-prefixed Properties). Diese Seite verwendet einen leichteren Tokenizer, der den Zeichenstrom durchläuft, dieselben Token-Klassen erkennt (ident, at-keyword, hash, string, bad-string, number, dimension, percentage, url, function, punctuation, comment) und sie als flache Liste ausgibt. Der Pretty-Printer setzt die Tokens dann mit dem gewählten Einzug, Klammernstil und Whitespace-Regeln wieder zusammen. Die zwei strukturellen Einheiten in CSS sind Regelblöcke (Selektor { Deklarationen }) und At-Regel-Blöcke (@media, @supports, @container, @keyframes umschließen einen oder mehrere Regelblöcke). Der Formatter durchläuft einen Tokenstrom und verfolgt die Klammertiefe: Ein { erhöht die Tiefe (und ein Zeilenumbruch + Einzug folgt), ein } verringert die Tiefe (und der Einzug schrumpft auf das Niveau des passenden {). Selektoren werden wörtlich ausgegeben - der Formatter parst sie nicht, da das Parsen eines Selektors wie `.foo > .bar:hover:not(.baz)` ein separates Problem ist (CSS Selectors Level 4). Selektoren werden bytegenau beibehalten, nur mit normalisiertem Whitespace (mehrere Leerzeichen zu einem zusammengefasst, nachgestellte Leerzeichen entfernt), sodass ein minifizierter `.a,.b,.c` als `.a, .b, .c` zurückgegeben wird. Deklarationen werden mit einem gewählten Stil formatiert: 'expanded' (jede Eigenschaft in einer eigenen Zeile, am lesbarsten), 'compact' (eine Regel pro Zeile, mehrere Deklarationen gepackt, der gebräuchlichste in produktivem CSS) oder 'compressed' (minifiziert, kein Whitespace, die kleinste mögliche Ausgabe). Der Doppelpunkt nach dem Eigenschaftsnamen wird immer von einem Leerzeichen gefolgt; der Wert wird wörtlich ausgegeben, außer bei einigen Normalisierungen (nachgestellte Nullen von `0.500` zu `.5` entfernt, Einheiten von `0px` zu `0` entfernt, die klassischen CSS-Minifikations-Tricks). Minifikation ist die umgekehrte Richtung: Kommentare entfernen, Whitespace innerhalb und zwischen Deklarationen zusammenfassen, das nachgestellte Semikolon nach der letzten Deklaration in einem Block weglassen (gemäß CSS 2.1 §4.1.7 erlaubt), benachbarte Regelblöcke mit gleichem Selektor und Media-Kontext zusammenführen und Farbwerte normalisieren (`#ffffff` -> `#fff`, `rgb(255,255,255)` -> `#fff` wenn möglich). Moderne Minifier (cssnano, lightningcss, clean-css) führen auch strukturelle Optimierungen durch: Zusammenführung von Langform zu Kurzform (`margin-top: 1px; margin-right: 1px; margin-bottom: 1px; margin-left: 1px;` -> `margin: 1px;`), Entfernung doppelter Deklarationen innerhalb einer Regel und Entfernung von Regeln, die kein Element matchen (`div:has-no-children { color: red; }` in Dead-Code-Eliminierungs-Durchläufen). Für minifizierte Ausgabe wendet die Seite die Standardtransformationen an; für menschenlesbare Ausgabe wendet die Seite den gewählten Einzug und Klammernstil an. Das CSS Nesting Module (CSSWG, Entwurf 2023, Baseline 2024) führt natives Nesting ein: `.a { color: red; & .b { color: blue; } }` ist jetzt gültiges CSS in modernen Browsern (Chrome 112+, Firefox 117+, Safari 16.5+). Vor-2024-Nesting erforderte Präprozessor-Rewrites (Sass `&` oder Less `&` zur Selektorkette). Die Seite behandelt beides: Präprozessor-genestetes CSS wird formatiert, als wäre es SCSS / Less (unter Beibehaltung des `&`), und natives CSS-Nesting (kein `&` erforderlich) wird durch den Regelblock-Durchlauf formatiert. Weitere At-Regeln, die die Seite behandelt: @keyframes und @counter-style nehmen einen Körper aus Deklarationen, keine genesteten Regelblöcke, daher formatieren sie sich anders (Deklarationen innerhalb der At-Regel, keine genestete Klammer). @media, @supports, @container, @layer nehmen einen Körper aus Regelblöcken. @import, @charset, @namespace sind nur auf oberster Ebene und werden in eigenen Zeilen ausgegeben. @property (registrierte Custom Properties) nimmt einen Deklarationsblock. @font-face ist ein einzelner Regelblock mit einer komplexen selektorlosen Deklaration. Die Seite behandelt jede nach ihrer spezifizierten Körperstruktur, nicht nach ihrem Namen. Die häufigste Formatierungs-Stolperfalle ist das Brechen von Inhalten in String-Literalen: `content: "hello world";`, `font-family: "Arial Black", sans-serif;`, `background: url("image.png")` - der Formatter darf das Leerzeichen im String nicht zusammenfassen, darf die URL nicht an `/` aufteilen und darf den Kommentartext innerhalb von `/* ... */` nicht antasten. Ein Tokenizer, der den String- und Kommentarzustand korrekt verfolgt, ist der Unterschied zwischen einem Formatter, der Benutzerinhalte rundreist, und einem, der sie verunstaltet. Der Tokenizer der Seite ist handgebaut und klein genug, um ihn mit dem Auge zu prüfen; produktive Formatter verwenden postcss oder lightningcss, die dieselbe Verpflichtung in ihren internen Lexern tragen.

• Lexikalische Analyse (CSS Syntax Level 3): Zeichenstrom durchlaufen, ident / at-keyword / hash / string / number / dimension / percentage / url / function / punctuation / comment Tokens ausgeben. Strings und Kommentare haben Zustand - ein fehlerhafter Tokenizer zerstört `content: "hello world";`.
• Zwei strukturelle Einheiten: Regelblöcke (Selektor { Deklarationen }) und At-Regel-Blöcke (@media, @supports, @container, @layer umschließen Regelblöcke). Der Formatter verfolgt die Klammertiefe und rückt jedes { eine neue Ebene ein; passendes } verkleinert die Ebene.
• Selektoren werden wörtlich ausgegeben, mit normalisiertem Whitespace: `.a,.b,.c` -> `.a, .b, .c`. Der Formatter parst keine Selektoren (CSS Selectors Level 4 ist ein separates Problem) - er bereinigt nur Leerzeichen und Kommas.
• Ausgabestile: 'expanded' (eine Deklaration pro Zeile, am lesbarsten), 'compact' (eine Regel pro Zeile, üblich in Produktion), 'compressed' (kein Whitespace, minifiziert). Doppelpunkt + Leerzeichen nach dem Eigenschaftsnamen ist die einzige universelle Formatregel.
• Minifikation: Kommentare entfernen, Whitespace zusammenfassen, nachgestelltes `;` weglassen, gleichselektorierte Regeln zusammenführen, `#ffffff` -> `#fff`, `0.500` -> `.5`, `0px` -> `0` normalisieren. Strukturelle Zusammenführungen: Langform -> Kurzform (`margin-top: 1px; ... margin-left: 1px;` -> `margin: 1px;`).
• CSS Nesting (CSSWG 2023, Baseline 2024): `.a { & .b { ... } }` ist jetzt natives CSS in Chrome 112+, Firefox 117+, Safari 16.5+. Vor-2024-Präprozessor-Nesting (Sass `&`, Less) ist weiterhin gültig; die Seite formatiert beides durch den Regelblock-Durchlauf.
• At-Regel-Körper: @keyframes und @counter-style nehmen Deklarationen; @media / @supports / @container / @layer nehmen Regelblöcke; @import / @charset / @namespace sind oberste-Ebene-Anweisungen; @property und @font-face nehmen Deklarationsblöcke. Die Seite behandelt jede nach ihrer spezifizierten Körperstruktur, nicht nach ihrem Namen.
• Sicherheitsgrenze: String-Literale (content, Schriftartnamen, URLs) und Kommentartext werden von keiner Transformation angetastet. Eine bytegenaue Rundreise ist der Korrektheitstest für einen CSS-Formatter - brich einen Content-String und der Benutzer bemerkt es sofort.