Panoramica CSS: identificare potenziali miglioramenti al CSS

Jecelyn Yeen

Twitter GitHub Homepage

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

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

Apri il riquadro Panoramica CSS

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

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

   

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

   

Eseguire ed eseguire nuovamente 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.

   

Informazioni sul report Panoramica CSS

Il report è costituito da cinque sezioni:

1. Riepilogo della 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. Questa sezione mostra anche i testi con problemi di basso contrasto.

   

   Ogni colore è cliccabile. 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.

   

   Fai clic sull'elemento nell'elenco per aprirlo nel riquadro Elementi.

3. Informazioni sui caratteri: tutti i caratteri della pagina e le relative occorrenze, raggruppati in base a dimensioni dei caratteri, spessore carattere e altezza della riga diversi. Analogamente alla sezione Colori, per visualizzare l'elenco degli elementi interessati fai clic sulle relative occorrenze.

   

4. Dichiarazioni inutilizzate. Tutti gli stili che non hanno 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 supporti. 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.