CSS-Formatierer
Ein Stylesheet so einrücken, dass Sie es lesen können, vollständig in Ihrem Browser. Es wird nichts umbenannt, gekürzt oder vereinheitlicht.
Läuft vollständig in Ihrem Browser. Nichts wird hochgeladen, protokolliert oder gespeichert.
Fügen Sie ein minifiziertes oder schlecht eingerücktes Stylesheet ein und lesen Sie es ordentlich. Formatiert wird in Ihrem Browser, und an dem Sheet ändert sich nichts außer seinem Leerraum.
Wie es funktioniert
Das Sheet wird in Stücke zerlegt — Kommentare, Zeichenketten, Adressen, Namen, Zahlen, Klammern — und dann wieder ausgegeben. Jede Regel bekommt ihren eigenen Block, jeder Selektor einer Liste seine eigene Zeile und jede Deklaration ihre eigene Zeile innerhalb der Regel. Verschachtelte Regeln, Media Queries und Keyframes verschachteln sich mit.
Leerraum bleibt erhalten, sofern er nicht nachweislich nichts bedeutet. Das ist das Gegenteil dessen, was die meisten Formatierer tun, und es ist Absicht: In CSS ist ein Leerzeichen zwischen zwei Selektoren der Nachfahren-Kombinator, „.a .b“ und „.a.b“ treffen also verschiedene Elemente. Leerraum wird nur vor einem Komma, Semikolon oder einer schließenden Klammer entfernt und nach einer öffnenden, wo CSS ihn nicht als irgendetwas lesen kann.
Das eine Leerzeichen, das hinzukommt, ist das nach dem Doppelpunkt einer Deklaration. Diesen Doppelpunkt vom Doppelpunkt einer Pseudoklasse zu unterscheiden ist der Grund, warum der Formatierer bis zur nächsten Klammer oder zum nächsten Semikolon vorausschaut, bevor er entscheidet, was er liest.
Beispiele
| Fall | Eingabe | Ergebnis |
|---|---|---|
| Eine Regel auf einer Zeile geschrieben | a{color:red;margin:0} | a { color: red; margin: 0; } |
Häufige Fragen
Wird mein Stylesheet irgendwohin gesendet?
Nein. Der Formatierer ist JavaScript, das in dieser Seite läuft. Nichts wird hochgeladen, nichts protokolliert und nichts gespeichert — Sie können Ihre Netzwerkverbindung abschalten, und das Tool arbeitet weiter.
Minifiziert es auch?
Nein, und das ist eine Entscheidung und kein Versäumnis. CSS zu minifizieren heißt zu entscheiden, welcher Leerraum Bedeutung trägt und welcher nicht, und das falsch zu entscheiden ändert, welche Elemente eine Regel trifft — still, auf eine Art, von der Sie in der Produktion erfahren. Das ist eine andere Arbeit, und sie verdient es, richtig oder gar nicht gemacht zu werden.
Repariert oder räumt es meine Werte auf?
Nein. Es schreibt keine Hex-Farbe klein, kürzt kein #ffffff, streicht keine führende Null, ordnet Ihre Deklarationen nicht um und fügt keine Herstellerpräfixe hinzu. Jedes davon ist eine Meinung über Ihren Code statt eine Frage der Disposition, und einiges davon ändert das Verhalten. Nur der Leerraum bewegt sich.
Versteht es Sass oder Less?
Teilweise, und ehrlich gesagt: Es setzt verschachtelte Regeln, und das ist der Teil, den diese Sprachen mit modernem CSS teilen. Es hat keine Ahnung, was ein Mixin, eine Variable oder eine Steuerdirektive bedeutet, es behandelt sie also als die Tokens, die sie sind. Es geht nichts verloren, aber erwarten Sie nicht, dass es weiß, dass @if einen Zweig eröffnet.
Was passiert mit einer Data-URI?
Sie überlebt. Ein url() ohne Anführungszeichen wird bis zu seiner schließenden Klammer als ein einziges Stück gelesen, denn eine Data-URI enthält regelmäßig ein Semikolon, und das als Ende einer Deklaration zu lesen würde den Wert in der Mitte durchschneiden.
Gut zu wissen
- Die Ausgabe enthält genau die Stücke, die die Eingabe enthielt. Die einzige Ergänzung ist ein Semikolon an der letzten Deklaration eines Blocks, was überall unbedenklich ist und das Ergebnis stabil hält, wenn die Regel später eine Zeile mehr bekommt.
- Eine nicht beendete Zeichenkette, ein nicht beendeter Kommentar oder ein nicht beendetes url() werden abgelehnt statt umformatiert, denn von da an kann das Tool Code nicht mehr von Text unterscheiden.
- Die Disposition ist deterministisch: Dasselbe Sheet und dieselbe Option ergeben immer dieselbe Ausgabe, und ein bereits formatiertes Sheet zu formatieren ändert nichts.