CSS online lesbar formatieren
Mache ein komprimiertes Stylesheet wieder lesbar. Selektoren und Deklarationen werden übersichtlich angeordnet, Blöcke und Media Queries passend eingerückt. Prüfe das erkannte Format, da manche CSS-Muster als JavaScript eingeordnet werden können.
Warum produktives CSS oft nur eine Zeile hat
Stylesheets werden aus demselben Grund minifiziert wie Skripte: Weniger übertragene Daten können die Ladezeit verkürzen. CSS kann zudem die erste Darstellung einer Seite aufhalten. Werkzeuge wie cssnano und Lightning CSS sowie Optimierungsschritte in Build-Prozessen entfernen Leerzeichen und Kommentare, verkürzen Farbwerte und können Regeln zusammenfassen. Bei Utility-Frameworks wird die Ausgabe besonders dicht. Ein kompiliertes Tailwind-Stylesheet enthält je nach Projekt Tausende kleiner Regeln, die in der minifizierten Datei ohne gut sichtbare Grenzen aufeinanderfolgen.
Die Kaskade wieder nachvollziehen
Ein häufiger Grund, CSS zu formatieren, ist die Frage, warum eine bestimmte Regel greift oder übergangen wird. Wenn Selektoren und ihre eingerückten Deklarationen klar getrennt sind, kannst du die Kaskade leichter untersuchen: Regeln für ein Element finden, ihre Spezifität vergleichen, die Reihenfolge prüfen und ein übersehenes !important entdecken. Auch Media Queries werden als zusammenhängende Blöcke sichtbar. So lassen sich die Bedingungen für verschiedene Bildschirmgrößen wesentlich leichter verfolgen als in einer einzigen komprimierten Zeile. Suche zum Beispiel nach einer Klasse, deren Abstände unerwartet aussehen, und prüfe alle Vorkommen samt den umgebenden Bedingungen. Eine spätere Regel oder eine andere Kaskadenebene kann erklären, warum ein Wert überschrieben wird. Die formatierte Datei zeigt dir jedoch nur das Stylesheet. Welche Regeln auf ein konkretes Element tatsächlich zutreffen, hängt auch vom HTML, vom aktuellen Zustand und vom Browser ab. Nutze dafür ergänzend die Ansicht der berechneten Stile in den Entwicklertools und vergleiche sie mit den gefundenen Regeln.
Moderne CSS-Syntax lesen
Der CSS-Formatter unterstützt moderne Syntax wie benutzerdefinierte Eigenschaften, calc- und clamp-Ausdrücke, Grid und Flexbox, Container Queries, standardkonforme Verschachtelung, Ebenen, supports-Blöcke und Keyframes. Lange Selektorlisten werden übersichtlich umgebrochen, erhaltene Kommentare in die Darstellung eingebunden. Auch Eigenschaften mit Herstellerpräfixen bleiben Bestandteil des Stylesheets. Die automatische Erkennung kann allerdings bei bestimmten Mustern, etwa .class oder @import, JavaScript vermuten. Kontrolliere daher die Formatanzeige, wenn gültiges CSS nicht wie erwartet verarbeitet wird.
Ein praktischer Hinweis zu kompilierten Frameworks
Ein aufbereitetes Tailwind- oder Bootstrap-Stylesheet kann sehr lang werden. Aktiviere die Zeilennummern und suche mit der Suchfunktion deines Browsers nach dem Klassennamen oder der Eigenschaft, die dich interessiert. Sehr große Dateien können den Browser bei der Verarbeitung vorübergehend blockieren; kleinere Ausschnitte sind dann leichter zu untersuchen. Wenn du stattdessen die Dateigröße verringern möchtest, prüfe deine Build-Konfiguration. Welche ungenutzten Regeln überhaupt entstehen oder entfernt werden, wird meist schon vor der abschließenden Minifizierung entschieden.
Häufig gestellte Fragen
Kann ich ein kompiliertes Tailwind-Stylesheet formatieren?
Ja, sofern es als CSS erkannt wird. Die Ausgabe kann sehr lang sein, weil Utility-Klassen viele einzelne Regeln erzeugen. Zeilennummern und die Suchfunktion des Browsers helfen bei der Orientierung. Bei sehr großen Dateien empfiehlt sich die Untersuchung eines kleineren Ausschnitts, da die lokale Verarbeitung die Oberfläche vorübergehend blockieren kann.
Werden Kommentare wiederhergestellt?
Nur noch vorhandene Kommentare können angezeigt werden. Viele Minifizierer entfernen gewöhnliche Kommentare und behalten lediglich bestimmte Lizenz- oder Urheberrechtshinweise. Was beim Build gelöscht wurde, lässt sich durch Formatierung nicht zurückholen. Der Formatter ordnet die verbliebenen Kommentare zusammen mit dem übrigen CSS lesbar an.
Funktioniert das auch mit SCSS oder Less?
Diese Seite ist für gewöhnliches CSS gedacht, wie es ein Browser erhält. Quelldateien mit SCSS- oder Less-spezifischen Variablen, Mixins oder anderen Erweiterungen gehören nicht zum vorgesehenen Eingabeformat. Standardkonform verschachteltes CSS wird dagegen unterstützt. Kompiliere Präprozessor-Quellen zuerst zu CSS, bevor du sie hier untersuchst.