CSS-Overview-Bereich

Öffnen Sie in Chrome DevTools den Bereich CSS Overview über Cmd+Shift+P → „CSS Overview“. Klicken Sie auf „Capture overview“, um das gesamte Stylesheet der aktuellen Seite zu analysieren. Der Bereich fasst Farben, Schriftarten, Media Queries und nicht verwendete Deklarationen zusammen.

Der Bereich „Colors“ listet jeden in der CSS-Datei der Seite verwendeten Farbwert auf – Hexadezimalwerte, rgb-Werte, benannte Farben und Farbverläufe –, gruppiert nach Typ. Wenn Sie auf eine Farbe klicken, sehen Sie, welche Elemente und Eigenschaften sie verwenden. So werden unbeabsichtigte Farbabweichungen und eine unübersichtliche Farbpalette sichtbar.

Der Bereich „Fonts“ listet jede auf der Seite verwendete Kombination aus font-family, font-size und font-weight auf. Er macht Ersatzschriftarten im Font-Stack sichtbar, weist auf uneinheitliche Typografieskalierungen hin und zeigt, welche Elemente die jeweilige Kombination verwenden.

Der Bereich „Media Queries“ listet jede @media-Regel, ihre Breakpoints und die Anzahl der darin enthaltenen Deklarationen auf. Diese Übersicht macht uneinheitliche Breakpoints sichtbar – in Codebasen sammeln sich manchmal mehr als 15 leicht unterschiedliche Breakpoint-Werte an.

CSS Overview kennzeichnet Deklarationen, die aufgrund von Spezifitätskonflikten oder nicht passenden Selektoren nie angewendet werden. Das unterscheidet diese Funktion von Coverage: Sie erkennt Regeln, die immer überschrieben werden, ohne dass eine Benutzerinteraktion erforderlich ist, um sie zu aktivieren.

Der Bereich hebt Textfarben hervor, die bei ihrem Hintergrund die Kontrastverhältnisse nach WCAG AA oder AAA nicht erfüllen. Wenn Sie auf einen Kontrastfehler klicken, wird das Element im DOM ausgewählt. So lassen sich Probleme mit der Barrierefreiheit einfach ohne zusätzliche Tools beheben.

Verwenden Sie CSS Overview nach größeren Redesigns oder wenn Sie sich in eine bestehende Codebasis einarbeiten. Die Farbenübersicht zeigt, wie stark die Implementierung von den Design-Tokens abgewichen ist. Die Schriftübersicht macht typografische Inkonsistenzen sichtbar, bevor sie den Benutzern auffallen.

Führen Sie CSS Overview auf mehreren Seiten derselben Anwendung aus. Der Vergleich ihrer Farb- und Schriftübersichten macht Abweichungen zwischen den Seiten sichtbar – etwa Komponenten, die eine andere Typografie oder Farbe verwenden als ihre Gegenstücke auf anderen Seiten.

Exportieren Sie die Farbdaten aus CSS Overview und vergleichen Sie sie mit der Palette Ihrer Design-Tokens. Farben, die in der Übersicht, aber nicht in der Token-Palette vorkommen, sind hartcodierte Werte. Sie sollten in Verweise auf Tokens umgewandelt und als eigenständige Werte entfernt werden.

Listen Sie die Breakpoints aus CSS Overview auf und identifizieren Sie Duplikate sowie nahezu identische Werte (768px, 769px, 770px von verschiedenen Entwicklern). Fassen Sie sie in der Breakpoint-Skala Ihres Designsystems zusammen und aktualisieren Sie alle Media Queries so, dass sie CSS Custom Properties oder SCSS-Variablen verwenden.

CSS Overview analysiert verknüpfte Stylesheets, nicht jedoch Inline-Styles oder zur Laufzeit erzeugte CSS-in-JS-Styles. Dynamische Klassen, die JavaScript nach dem ersten Rendern hinzufügt, werden möglicherweise nicht angezeigt. Ergänzen Sie die Analyse durch Coverage und eine manuelle Prüfung, um dynamische Styles vollständig zu erfassen.

CSS Overview bietet ein seitenweites Audit von Farben, Schriftarten, Media-Query-Breakpoints und Kontrastproblemen. Verwenden Sie es, um Designabweichungen, eine unübersichtliche Farbpalette, typografische Inkonsistenzen und Fehler bei der Barrierefreiheit zu erkennen, bevor daraus technische Schulden entstehen, die nur schwer zu beseitigen sind.