Panel CSS Overview

W Chrome DevTools proszę otworzyć panel CSS Overview za pomocą Cmd+Shift+P → "CSS Overview". Proszę kliknąć "Capture overview", aby przeanalizować cały arkusz stylów bieżącej strony. Panel podsumowuje kolory, czcionki, zapytania media i nieużywane deklaracje.

Sekcja Colors zawiera wszystkie wartości kolorów użyte w CSS strony — szesnastkowe, rgb, nazwane oraz punkty gradientów — pogrupowane według typu. Kliknięcie koloru pokazuje, które elementy i właściwości go używają, ujawniając niezamierzone różnice kolorystyczne i nadmierne rozrastanie się palety.

Sekcja Fonts zawiera wszystkie kombinacje font-family, font-size i font-weight zastosowane na stronie. Ujawnia zapasowe czcionki w stosie, wskazuje niespójną skalę typograficzną oraz pokazuje, które elementy używają poszczególnych kombinacji.

Sekcja Media Queries zawiera każdą regułę @media, jej breakpointy oraz liczbę deklaracji w jej obrębie. Ten przegląd ujawnia niespójność breakpointów — w jednym projekcie zespoły czasami gromadzą ponad 15 nieznacznie różniących się wartości breakpointów.

CSS Overview oznacza deklaracje, które nigdy nie są stosowane z powodu konfliktów specyficzności lub niedopasowanych selektorów. Różni się to od Coverage — narzędzie wykrywa reguły zawsze nadpisywane, bez konieczności interakcji użytkownika w celu ich aktywowania.

Panel wyróżnia kolory tekstu, które nie spełniają współczynników kontrastu WCAG AA lub AAA względem tła. Kliknięcie elementu z nieprawidłowym kontrastem zaznacza go w DOM, ułatwiając usuwanie problemów z dostępnością bez używania dodatkowych narzędzi.

Proszę używać CSS Overview po większych przeprojektowaniach lub podczas wdrażania się w istniejącą bazę kodu. Podsumowanie kolorów pokazuje, jak bardzo implementacja odeszła od tokenów projektowych. Podsumowanie czcionek ujawnia niespójności typografii, zanim zauważą je użytkownicy.

Proszę uruchomić CSS Overview na wielu stronach tej samej aplikacji. Porównanie podsumowań kolorów i czcionek ujawnia rozbieżności między stronami — komponenty, które są renderowane z inną typografią lub kolorem niż ich odpowiedniki na innych stronach.

Proszę wyeksportować dane o kolorach z CSS Overview i porównać je z paletą tokenów projektowych. Kolory obecne w przeglądzie, ale nieobecne w palecie tokenów, są wartościami zapisanymi bezpośrednio w kodzie. Należy zastąpić je odwołaniami do tokenów i usunąć jako niezależne wartości.

Proszę wyświetlić breakpointy z CSS Overview, zidentyfikować duplikaty i wartości niemal identyczne (768px, 769px, 770px pochodzące od różnych programistów), skonsolidować je w skali breakpointów systemu projektowego i zaktualizować wszystkie zapytania media tak, aby używały własnych właściwości CSS lub zmiennych SCSS.

CSS Overview analizuje powiązane arkusze stylów — nie analizuje stylów inline ani stylów CSS-in-JS tworzonych w czasie działania. Dynamiczne klasy dodane przez JavaScript po początkowym renderowaniu mogą się nie pojawić. Aby uzyskać pełny obraz dynamicznych stylów, należy uzupełnić analizę za pomocą Coverage i ręcznej inspekcji.

Jaki rodzaj problemu z dostępnością wykrywa CSS Overview?

CSS Overview przeprowadza audyt na poziomie strony, obejmujący kolory, czcionki, breakpointy zapytań media i problemy z kontrastem. Należy używać go do wykrywania rozbieżności względem projektu, nadmiernego rozrastania się palety, niespójności typografii i problemów z dostępnością, zanim narosną one do postaci długu technicznego, którego uporządkowanie będzie kosztowne.