Panoramica CSS: identificare potenziali miglioramenti al CSS

Jecelyn Yeen

Utilizza il riquadro Panoramica CSS per comprendere meglio il CSS della tua pagina e identificare potenziali miglioramenti.

Nota: questa è una funzionalità in anteprima in Chrome 96. Il nostro team sta lavorando attivamente a questa funzionalità e apprezziamo il tuo feedback per ulteriori miglioramenti.

Apri il riquadro Panoramica CSS

1. Apri una pagina web, ad esempio questa pagina.
2. Apri DevTools.

3. Seleziona Personalizza e controlla DevTools > Altri strumenti > Panoramica CSS.

   

   In alternativa, usa il menu Comando per aprire il riquadro Panoramica CSS.

   

Eseguire e rieseguire un report Panoramica CSS

1. Fai clic sul pulsante Acquisisci panoramica per generare un report Panoramica CSS per la tua pagina.

   

2. Per eseguire nuovamente una panoramica CSS, fai clic sull'icona Cancella panoramica e ripeti il primo passaggio.

   

Comprendere il report Panoramica del CSS

Il report è composto da cinque sezioni:

1. Riepilogo panoramica. Un riepilogo generale del CSS della tua pagina.

2. Colori. Tutti i colori della pagina. I colori vengono raggruppati per tipo, ad esempio colori di sfondo, colori del testo e così via. In questa sezione vengono mostrati anche i testi con problemi di basso contrasto.

   

   Ogni colore è selezionabile. Ad esempio, supponiamo che il colore del bordo #DADCE0 non corrisponda alla combinazione di colori del tuo sito. Fai clic sul colore per visualizzare un elenco degli elementi che utilizzano questo colore.

   

   Per evidenziare l'elemento nella pagina, passa il mouse sopra l'elemento nell'elenco.

   

   Per aprire l'elemento nel riquadro Elementi, fai clic sull'elemento nell'elenco.

3. Informazioni sui caratteri. Tutti i caratteri della pagina e le relative occorrenze, raggruppati per dimensione, spessore e altezza della riga diversi. Analogamente alla sezione Colori, fai clic sulle occorrenze per visualizzare l'elenco degli elementi interessati.

   

4. Dichiarazioni inutilizzate. Tutti gli stili che non hanno alcun effetto, raggruppati per motivo.

   

   Ad esempio, le due dichiarazioni riportate sopra non sono utilizzate perché i contenuti determinano l'altezza e la larghezza di un elemento in linea. Per visualizzare gli elementi corrispondenti, fai clic sulle occorrenze.

5. Query multimediali. Tutte le query supporti definite nella pagina, ordinate per numero di occorrenze in ordine decrescente. Per visualizzare l'elenco degli elementi interessati, fai clic sulle relative occorrenze.