Come precedentemente evidenziato il pannello Styles mostra chiaramente tutte le regole CSS applicate all’elemento attualmente selezionato nel DOM della pagina web partendo da quelle a priorità maggiore fino ad arrivare a quelle con priorità più bassa.

In particolare dunque nella prima parte del pannello (1) (element.style) vengono visualizzate e gestite tutte le informazioni di stile applicate direttamente all’elemento selezionato utilizzando la proprietà style. Queste informazioni di stile saranno quindi quelle a priorità più elevata.

Immediatamente al di sotto di questa sezione troviamo invece tutte le regole di stile impostate a livello di CSS sull’elemento attualmente selezionato (2) (es. div)

Infine nell’ultima parte di questo pannello (3) troviamo eventuali regole di stile che l’elemento attualmente selezionato eredita direttamente da uno dei suoi elementi padre presenti nel DOM della pagina.

Esaminiamo ora alcune delle principali situazioni che potrebbero verificarsi all’interno di questo pannello cercando di comprenderne meglio il significato. Facciamo quindi riferimento alla seguente figura:

• Stili impostati a livello di CSS sul selector (div) che matcha l’elemento attualmente selezionato nel DOM della pagina
• Le regole di base dei CSS, alle quali abbiamo precedentemente accennato, ci dicono che nel caso in cui due proprietà CSS abbiano la stessa origine, lo stesso peso e la stessa specificità, quella applicata per ultima è quella a priorità maggiore. Nell’esempio considerato, siamo proprio in queste condizioni, e verrà quindi applicata la seconda proprietà “color” (a priorità maggiore) mentre la prima verrà mostrata con un testo barrato per evidenziare che è stata sovrascritta.
• In questa sezione, generalmente evidenziata in grigio, vengono riportate le proprietà di stile per l’elemento attualmente selezionato che vengono ereditate direttamente dai fogli di stile propri del browser.
• Nella maggior parte dei casi gli stili ereditati direttamente dal browser risultano essere sovrascritti da quelli impostati in maniera specifica per la pagina web da chi realizza il sito. Nel caso considerato ad esempio la proprietà “display:inline-block” impostata dall’utente ha priorità maggiore rispetto a “display:block” ereditata dai fogli di stile del browser (che effettivamente è riportata con un testo barrato ad indicare che è stata sovrascritta da un’analoga regola a priorità maggiore)
• Le proprietà di stile ereditate, per l’elemento attualmente selezionato nel DOM della pagina, da altri nodi padre vengono raggruppate in apposite sezioni tutte con un intestazione del tipo "Inherited from [node]". Cliccando sull’identificativo del nodo presente all’interno dell’ intestazione questo verrà automaticamente selezionato e verranno quindi visualizzate all’interno del pannello Styles le sue proprietà CSS
• Facendo sempre riferimento alle regole di applicazione delle proprietà CSS alle quali abbiamo precedentemente accennato risulta che il selector “:root body” ha una priorità maggiore rispetto al solo selector “body”. In conseguenza di ciò, nel caso considerato, la proprietà “font-size” definita sul selector body verrà sovrascritta (e mostrata con testo barrato) dall’analoga proprietà (a priorità più elevata) definita sul selector body
• Analogamente al caso precedente anche la proprietà font-family viene sovrascritta da un’analoga proprietà a priorità maggiore

Infine nel caso in cui una o più regole CSS siano applicate contemporaneamente a più selector (separati da , come nella figura di seguito riportata), questi risulteranno essere colorati in maniera diversa.

Nello specifico verranno colorati in grigio chiaro i selector che non corrispondono all’elemento attualmente selezionato nel DOM della pagina. I selector che corrispondono invece all’elemento selezionato verranno colorati in nero.

In definitiva, analizzando il pannello Styles si riesce in maniera piuttosto immediata a comprendere quali sono le proprietà CSS applicate all’elemento selezionato e, soprattutto, da dove arrivano queste stesse proprietà.

Allo stesso modo però potrebbe essere sicuramente molto utile avere a disposizione anche l’elenco completo di tutte le proprietà CSS applicate all’elemento selezionato, indipendentemente da dove queste possano arrivare e tralasciando quindi quelle che vengono sovrascritte da altre regole analoghe a priorità maggiore.

E’ possibile visualizzare questo tipo di elenco nella sezione “Computed” presente nella parte destra del pannello Elements

Nella parte alta della sezione Computed possiamo trovare poi una serie di rettangoli concentrici, colorati in maniera diversa, che ci danno una rappresentazione visiva molto chiara di quelle che sono le dimensioni reali dell’elemento selezionato nel cosiddetto CSS BOX MODEL.

Il contenuto più interno di questa serie di rettangoli mostra quelle che sono le dimensioni (altezza e larghezza) dell’elemento analizzato. Spostandoci poi verso l’esterno troviamo rispettivamente le dimensioni dei padding, dei bordi e dei margini.

Se ci stiamo chiedendo perché un dato elemento non si comporta come previsto questa serie di rettangoli concentrici (presenti anche nella parte bassa del pannello Styles) risultano essere quindi particolarmente utili per cercare di diagnosticare il problema. Si potrebbe ad esempio facilmente trovare che l’elemento considerato è più ampio del previsto a causa di un padding che non era stato considerato e che magari è stato ereditato da alcuni elementi padre.

E’ inoltre possibile modificare i valori indicati all’interno di questi rettangoli variando, di conseguenza, in tempo reale, i valori delle relative proprietà CSS (che verranno inseriti nella parte element.style del pannello Styles)