Ordnen Sie CSS-Regeln und Deklarationen

Entwicklerinnen und Entwickler nutzen CSS-Formatierer vor Code-Review, Fehlersuche oder Übergabe an andere Beteiligte.

Ordnen Sie CSS-Regeln und Deklarationen, damit Prüfung, Bearbeitung und Fehlersuche leichter werden. Direkt im Browser nutzbar, ohne Anmeldung.

Bedienung

Fügen Sie Ihr Stylesheet in den Eingabebereich ein oder importieren Sie eine der akzeptierten Codedateien.
Starten Sie den Formatierungslauf; Regeln und Deklarationen kommen mit gleichmäßiger Einrückung und klaren Zeilenumbrüchen zurück.
Lesen Sie die Ausgabe durch und erkennen Sie die Blöcke, die in der Originaldatei gedrängt oder ungeordnet wirkten.
Kopieren Sie die aufgeräumte Version in Ihren Editor und vergleichen Sie sie mit der Quelle, bevor Sie etwas committen.
Leeren Sie die Eingabe, bevor Sie eine andere Datei einfügen, damit jeweils nur ein Projekt den Ergebnisbereich füllt.

Beispiel

Ein Entwickler erbt ein Stylesheet, das in einem langen Rutsch geschrieben wurde, mit allem auf wenigen Zeilen zusammengepackt. Fügen Sie es hier ein, nehmen Sie die eingerückte Version zurück und lesen Sie sie Block für Block: Selektoren stehen untereinander, und jede Deklaration steht in ihrer eigenen Zeile.

Grenzen und Formate

Syntaxfehler bleiben unangetastet, ein fehlendes Semikolon fehlt also auch nach dem Durchlauf.
Dieses Werkzeug ändert nur die Darstellung: Es benennt keine Klassen um und löscht keine Regeln, die Sie nicht mehr verwenden.
Akzeptierte Dateien sind HTML, CSS, JavaScript, JSON und SQL, während eine Binärdatei hier nicht lesbar sein wird.
Bei einem sehr kurzen Stylesheet bringt die automatische Einrückung wenig, prüfen Sie daher, ob sich die Ausgabe noch genau wie die Eingabe verhält.

Wo die Verarbeitung stattfindet

Die Formatierung läuft in Ihrem Browser. Der von Ihnen eingefügte Code wird nirgendwohin kopiert und verschwindet, wenn Sie die Seite schließen, daher birgt die Arbeit mit Auszügen aus einem privaten Projekt kein zusätzliches Risiko.

Häufige Fragen

Ändert die Formatierung das Aussehen meiner Seite?

Nein. Nur Abstände, Zeilenumbrüche und Einrückung werden verändert. Selektoren, Eigenschaften und Werte bleiben genau gleich, daher liest der Browser das Stylesheet genauso wie zuvor und die gerenderte Seite verschiebt sich nicht.

Kann ich ein sehr großes Stylesheet formatieren?

Es hängt hauptsächlich vom Arbeitsspeicher Ihres Geräts ab, da die gesamte Arbeit im Browser stattfindet. Bei einer großen Datei kann die Seite langsamer werden; teilen Sie das Stylesheet in Teile auf und lassen Sie sie nacheinander laufen.

Warum enthält die Ausgabe noch eine sehr lange Zeile?

Manche Werte sind einfach lang, etwa eine Schriftartkette oder eine tief verschachtelte Funktion. Der Formatierer trennt Werte innerhalb einer Deklaration nicht auf; er konzentriert sich auf die Struktur der Regelblöcke.