Bei einer umfangreich gestalteten Website verliert man schon einmal den Überblick über die Stylesheets. Neben allgemeinen CSS-Angaben für das Grundlayout der Website sind häufig auch ganz spezielle Stylesheets für besondere Inhalte vorhanden. Die Website CSS Stats gibt einen umfassenden Überblick über die hinterlegten Stylesheets eines Webprojektes und verrät in nackten Zahlen und übersichtlichen Auflistungen, was alles definiert wurde.
Anzahl der definierten Regeln, Selektoren, Deklarationen und Eigenschaften
Um statistische Informationen per CSS Stats für die eigene Website einzuholen, muss einfach die URL zur Website angegeben werden. Schon spuckt CSS Stats aus, wie viele Regeln, Selektoren, Deklarationen und Eigenschaften im Dokument definiert wurden. Außerdem erfährt man, wie häufig Schriftgrößen, Farben sowie Höhen- und Breitenangaben gemacht wurden.
Überblick in Zahlen
Wer den Überblick über seine eigenen Stylesheets verloren hat und nicht mehr weiß, welche Farben und Schriften im Laufe der Zeit definiert wurden, findet eine sinnvolle Übersicht über alle Vorder- und Hintergrundfarben sowie die verwendeten Schriftarten und -größen. Auf diese Weise erkennt man schnell, ob Farb- oder Schriftangaben gemacht wurden, die nicht mehr benötigt werden oder nicht dem Corporate Design entsprechen.
Gerade bei Frameworks oder Content-Management-Systeme mit Plug-ins sind häufig Stylesheets eingebunden, die nicht der Gestaltung der Website entsprechen. So gelangen dann schon mal Farben und Schriften ins Weblayout, die dort nichts zu verloren haben. Mit CSS Stats findet man diese Irrgänger schnell.
Aussagekräftige Diagramme
Zusätzlich gibt es einige interessante Diagramme, darunter etwa Balkendiagramme, welche die Anzahl aller Deklarationen mit der Anzahl eindeutiger Deklarationen pro Eigenschaft gegenüberstellen. Man erfährt beispielsweise, wie häufig eine „width“-Eigenschaft definiert wurde und wie viele eindeutige „width“-Eigenschaften – also solche mit demselben Wert – definiert wurden.
Gegenüberstellung von total und eindeutigen Eigenschaften
Außerdem gibt es ein Kurvendiagramm, welches für die gesamten Stylesheet-Angaben einer Seite auswertet, wie viele Eigenschaften pro Regel hinterlegt sind.
Angaben über Media Queries
Ebenfalls für Webentwickler interessant, ist die Auflistung der Media-Queries-Regeln. Man erfährt so, welche unterschiedlichen Regeln definiert wurden. Das kann hilfreich sein, wenn man einen Überblick über die Media Queries bekommen möchte. Als Webentwickler erfährt man so, bei welchen Display- oder Browserbreiten ein abweichendes CSS definiert wurde.
Alle Sylesheets im Blick
Zu guterletzt führt CSS Stats alle Angaben, die gegebenenfalls in verschiedenen Dateien abgelegt wurden, zusammen. Auf diese Weise kann man sich durch das gesamte Stylesheet scrollen, ohne die verschiedenen Stylesheet-Dateien separat suchen und öffnen zu müssen.
Eine Verlinkung zu allen CSS-Dateien findet man natürlich ebenfalls in den CSS Stats.
Fazit und Link zum Beitrag
Da man bei Stylesheets schnell mal den Überblick verliert, ist CSS Stats eine gute Anlaufstelle, um sich diesen wieder zu verschaffen. Auch wenn man ein Webprojekt übernimmt, hilft CSS Stats, sich in die Stylesheet-Angaben und -Architektur einzuarbeiten.
Leider verrät CSS Stats nicht, wo man bestimmte Angaben findet. Schön wäre es, wenn für einzelne Eigenschaften oder Regeln die Dateien und Zeilennummern ausgegeben würden, in denen die Angaben hinterlegt sind. Aber, was ist schon perfekt?
(dpe)
