Stili calcolati e ispettore del box model

Chrome DevTools → Elements → la scheda Computed mostra il valore finale calcolato di ogni proprietà CSS dell'elemento selezionato, dopo la risoluzione di cascade, ereditarietà e specificità. Risponde alla domanda "che cosa viene effettivamente applicato?" anziché "che cosa è stato scritto?"

Il pannello Computed mostra un diagramma interattivo del box model con le dimensioni di contenuto, padding, bordo e margine dell'elemento selezionato. Faccia clic su una dimensione qualsiasi per evidenziare la regola CSS che l'ha impostata e passare al pannello Styles.

Digiti nella casella del filtro per trovare rapidamente proprietà calcolate specifiche. Selezioni "Show all" per includere le proprietà ereditate e quelle predefinite del browser. Deselezioni questa opzione per mostrare solo le proprietà non predefinite: è il percorso più rapido verso gli stili applicati pertinenti.

Le proprietà visualizzate in grigio in Computed sono ereditate da un elemento genitore. Faccia clic sulla proprietà ereditata per passare all'elemento e alla regola che l'hanno impostata, tracciando la cascade senza dover esaminare manualmente il genitore nel markup.

La scrittura di margin: 16px 8px si espande in quattro valori calcolati: margin-top, margin-right, margin-bottom, margin-left. Il pannello Computed mostra sempre le singole proprietà longhand, utili per eseguire il debug di problemi di spaziatura asimmetrica.

I valori dei colori calcolati sono sempre nel formato rgb() o rgba(), indipendentemente dal modo in cui sono stati scritti. Faccia clic su un campione di colore nel pannello Styles per alternare il formato di visualizzazione (hex, hsl, rgb). Il pannello Computed mostra sempre il colore risolto.

Controlli font-size, font-family, line-height e letter-spacing calcolati per verificare che i token tipografici siano applicati correttamente. I fallback dei caratteri del browser vengono visualizzati in font-family calcolato quando il caricamento del carattere richiesto non riesce.

box-sizing: border-box fa sì che width includa padding e bordo; box-sizing: content-box (il valore predefinito) li esclude. Il diagramma del box model in DevTools riflette il modello applicato: confronti la larghezza del contenuto con la larghezza totale per confermare il comportamento di box-sizing.

I margini verticali tra gli elementi block collassano assumendo il maggiore dei due valori. Il diagramma del box model mostra il margine effettivo: lo utilizzi insieme a Layout Inspector per identificare i margini collassati che differiscono dai valori scritti.

Il pannello Styles mostra tutte le regole che hanno come destinazione l'elemento, ordinate per specificità. Le regole barrate sono sovrascritte. Per individuare quale regola prevale in un conflitto tra proprietà, cerchi la dichiarazione non barrata più in alto nel pannello Styles.

Le regole del foglio di stile user-agent del browser vengono visualizzate in fondo al pannello Styles con l'etichetta "user agent stylesheet." Computed mostra i relativi valori risolti. Reimposti questi valori con un CSS reset o Normalize.css per stabilire una base coerente tra i browser.

Che cosa mostra il pannello Computed Styles che il pannello Styles non mostra?

Il pannello Computed Styles e il diagramma del box model rivelano i valori finali risolti di tutte le proprietà CSS dopo la risoluzione della cascade. Li utilizzi per tracciare l'ereditarietà, eseguire il debug dell'espansione delle shorthand, analizzare box-sizing e individuare quale regola prevale nei conflitti di specificità di qualsiasi elemento.