Questa guida presuppone che tu abbia familiarità con l'ispezione di CSS in Chrome DevTools. Per apprendere le nozioni di base, consulta Visualizzare e modificare il CSS.
Controlla il CSS che hai creato
Supponi di aver aggiunto del codice CSS a un elemento e di voler assicurarti che i nuovi stili vengano applicati correttamente. Quando aggiorni la pagina, l'elemento appare come prima. Si è verificato un problema.
La prima cosa da fare è controllare l'elemento e assicurarti che il nuovo CSS sia effettivamente applicato all'elemento.
A volte il nuovo CSS viene visualizzato nel riquadro Elementi > Stili, ma il nuovo CSS è in testo chiaro, non modificabile, barrato oppure è affiancato da un'icona di avviso o di suggerimento.
Informazioni su CSS nel riquadro Stili
Il riquadro Stili riconosce molti tipi di problemi CSS e li evidenzia in modi diversi.
Selettori corrispondenti e senza corrispondenza
Il riquadro Stili mostra i selettori corrispondenti in testo normale e quelli senza corrispondenza in testo chiaro.
Valori e dichiarazioni non validi
Il riquadro Stili sbarra la visualizzazione e mostra 
icone di avviso accanto a quanto segue:
- Un'intera dichiarazione CSS (proprietà e valore) quando la proprietà CSS non è valida o è sconosciuta.
- Solo il valore quando la proprietà CSS è valida, ma non è valido.
Ignorati
Il riquadro Stili barra le proprietà che sono sostituite da altre in base all'ordine a cascata.
In questo esempio, l'attributo di stile width: 300px; nell'elemento sostituisce width: 100% nella classe .youtube.
Non attivo
Il riquadro Stili viene visualizzato con testo chiaro e inserisce le icone delle informazioni 
accanto alle proprietà valide, ma che non hanno effetto per le altre proprietà.
Queste proprietà chiare non sono attive a causa della logica CSS e non dell'Ordine a cascata.
In questo esempio, la proprietà display: block; disattiva justify-content e align-items, che controllano i layout flessibili o a griglia.
Ereditate e non ereditate
Il riquadro Stili elenca le proprietà in Inherited from <element-name> sezioni in base alla relativa ereditarietà predefinita:
- I valori ereditati per impostazione predefinita sono in testo normale.
- I valori non ereditati per impostazione predefinita sono in testo chiaro.
In forma breve
Le proprietà a breve (conciso) ti consentono di impostare più proprietà CSS contemporaneamente e rendere il foglio di stile più leggibile. Tuttavia, a causa della natura breve di queste proprietà, potresti perderti una proprietà longhand (esatta) che sostituisce una proprietà implicita.
Il riquadro Stili mostra le proprietà abbreviate come 
elenchi a discesa che contengono tutte le proprietà abbreviate.
In questo esempio, viene eseguito l'override di due delle quattro proprietà abbreviate.
Non modificabile
Il riquadro Stili mostra le proprietà che non possono essere modificate in corsivo. Ad esempio, il CSS delle seguenti origini non può essere modificato:
user agent stylesheet: foglio di stile predefinito di Chrome.
Attributi HTML correlati allo stile dell'elemento, ad esempio altezza, larghezza, colore e così via. Puoi modificarli nell'albero DOM. In questo modo il CSS viene aggiornato nel riquadro Stili, ma non viceversa.
In questo esempio, l'attributo
height="48"in un elemento<svg>è impostato su50. Questa operazione aggiorna la proprietà corrispondente insvg[Attributes Style]nel riquadro Stili.
Controllare un elemento che ha ancora uno stile diverso da quello che pensi
Per provare a capire cosa va storto, prova a controllare:
- La documentazione CSS e la specificità dei selettori nelle descrizioni comando nel riquadro Stili.
- Il riquadro Elaborato per visualizzare il CSS "finale" applicato a un elemento e confrontarlo con quello che hai dichiarato.
Il riquadro Elementi > Stili mostra l'insieme esatto di regole CSS scritte nei vari fogli di stile. Nel riquadro Elementi > Calcolati sono invece elencati i valori CSS risolti che Chrome utilizza per visualizzare un elemento:
- CSS derivato dall'ereditarietà
- Vincitori Cascade
- Proprietà long-hand (precise), non in forma abbreviata (concisa)
- Valori calcolati, ad esempio
font-size: 14pxanzichéfont-size: 70%
Informazioni su CSS nel riquadro Elaborato
Anche il riquadro Elaborato mostra varie proprietà in modo diverso.
Dichiarati ed ereditato
Nel riquadro Elaborato sono elencate le proprietà dichiarate in qualsiasi foglio di stile con carattere normale, sia proprietari dell'elemento che ereditati. Fai clic sull'icona di espansione 
accanto ai membri per visualizzare la fonte.
Per visualizzare la dichiarazione nel riquadro Stili, passa il mouse sopra la proprietà espansa e fai clic sul pulsante freccia 
.
Per visualizzare la dichiarazione nel riquadro Origini, fai clic sul link al file di origine.
Per le proprietà con più origini, il riquadro Calcolato mostra per primo il vincitore a cascata.
Runtime
Il riquadro Calcolato elenca i valori delle proprietà calcolati durante il runtime in testo chiaro.
In questo esempio, Chrome ha calcolato quanto segue per l'elemento <ul>:
- Il valore di
widthrelativo all'elemento padre,<div> - L'elemento
heightrispetto ai relativi elementi secondari, i due elementi<li>
Non ereditati e personalizzati
Per fare in modo che il riquadro Elaborato mostri tutte le proprietà e i relativi valori, seleziona 
Mostra tutte. Tutte le proprietà includono:
- Valori iniziali per le proprietà non ereditate in testo chiaro.
- Proprietà personalizzate: con un prefisso
--in testo normale. Queste proprietà vengono ereditate per impostazione predefinita.
Per suddividere questo lungo elenco in categorie, seleziona 
Gruppo.
Questo esempio mostra i valori iniziali per le proprietà non ereditate nella sezione Animazione e per le proprietà personalizzate in Variabili CSS.
Cerca duplicati
Per esaminare una proprietà specifica e i suoi potenziali duplicati, digita il nome della proprietà nella casella di testo Filtro. Puoi farlo nei riquadri Stili e Elaborato.
Consulta Cercare e filtrare il CSS di un elemento.
Trova il CSS inutilizzato
Consulta la sezione Copertura: trovare codice JavaScript e CSS inutilizzato.