Pannello CSS Overview

In Chrome DevTools, apra il pannello CSS Overview tramite Cmd+Shift+P → "CSS Overview". Faccia clic su "Capture overview" per analizzare l'intero foglio di stile della pagina corrente. Il pannello riepiloga colori, font, media query e dichiarazioni inutilizzate.

La sezione Colors elenca ogni valore di colore utilizzato nel CSS della pagina — esadecimale, rgb, denominato e punti di interruzione dei gradienti — raggruppandolo per tipo. Facendo clic su un colore viene mostrato quali elementi e proprietà lo utilizzano, rivelando variazioni cromatiche involontarie e un'eccessiva proliferazione dei colori nella palette.

La sezione Fonts elenca ogni combinazione di font-family, font-size e font-weight applicata alla pagina. Rivela i fallback della pila di font, mette in evidenza scale tipografiche incoerenti e mostra quali elementi utilizzano ciascuna combinazione.

La sezione Media Queries elenca ogni regola @media, i relativi breakpoint e il numero di dichiarazioni al suo interno. Questa panoramica rivela l'incoerenza dei breakpoint: nei team si accumulano talvolta più di 15 valori leggermente diversi in una codebase.

CSS Overview segnala le dichiarazioni che non vengono mai applicate a causa di conflitti di specificità o selettori non corrispondenti. Questo è diverso da Coverage: rileva le regole sempre sovrascritte senza richiedere un'interazione dell'utente per attivarle.

Il pannello evidenzia i colori del testo che non rispettano i rapporti di contrasto WCAG AA o AAA rispetto allo sfondo. Facendo clic su un errore di contrasto si seleziona l'elemento nel DOM, semplificando la correzione dei problemi di accessibilità senza ricorrere a strumenti separati.

Utilizzi CSS Overview dopo importanti riprogettazioni o quando inizia a lavorare su una codebase esistente. Il riepilogo dei colori mostra quanto l'implementazione si sia allontanata dai design token. Il riepilogo dei font rivela le incoerenze tipografiche prima che gli utenti se ne accorgano.

Esegua CSS Overview su più pagine della stessa applicazione. Il confronto tra i riepiloghi dei colori e dei font rivela le divergenze tra le pagine: componenti che vengono renderizzati con una tipografia o un colore diversi rispetto agli equivalenti presenti in altre pagine.

Esporti i dati sui colori da CSS Overview e li confronti con la palette dei design token. I colori presenti nella panoramica ma non nella palette dei token sono valori hardcoded che dovrebbero essere convertiti in riferimenti ai token e rimossi come valori indipendenti.

Elencare i breakpoint da CSS Overview, identificare i duplicati e quelli quasi duplicati (768px, 769px, 770px di sviluppatori diversi), consolidarli nella scala dei breakpoint del design system e aggiornare tutte le media query affinché utilizzino proprietà personalizzate CSS o variabili SCSS.

CSS Overview analizza i fogli di stile collegati, ma non gli stili inline o gli stili runtime CSS-in-JS. Le classi dinamiche aggiunte da JavaScript dopo il rendering iniziale potrebbero non comparire. Per una copertura completa degli stili dinamici, integri l'analisi con Coverage e con un'ispezione manuale.

Quale tipo di problema di accessibilità rileva CSS Overview?

CSS Overview offre un audit a livello di pagina di colori, font, breakpoint delle media query e problemi di contrasto. Lo utilizzi per individuare il disallineamento rispetto al design, la proliferazione dei colori nella palette, le incoerenze tipografiche e i problemi di accessibilità prima che si accumulino trasformandosi in debito tecnico difficile e costoso da risolvere.