Come fare il debug di CSS

In questo approfondimento vediamo come debuggare CSS. Il termine debuggare non mi piace tantissimo, ma è comunque azzeccato. Se dovesse succedere infatti che CSS non si comporti come dovrebbe abbiamo la possibilità di esaminare cosa sta causando problemi e risolvere.

Partiamo però da capire quali sono i principali problemi che si potrebbero presentare utilizzando i CSS.

I bug più frequenti di CSS sono:

• elementi che creano un overflow: può capitare che, soprattutto sui dispositivi più piccoli, compaia una scroll bar orizzontale di cui non sappiamo assolutamente niente. Quindi come facciamo a capire chi la crea? Lo scopriremo tra poco
• Inconsistenza del browser: questo è un problema che abbiamo già individuato in passato, durante la lezione sui form. Come si risolve? Semplicemente dobbiamo installare i vari browser sui nostri sistemi operativi e fare quindi dei test cross browser per poterci assicurare che tutto funzioni correttamente.
• Cascata con eredità inattese: si potrebbe presentare uno dei problemi che abbiamo già esaminato nella lezione sui layer, dove ci potrebbe essere un selettore troppo specifico che sovrascrive un selettore precedente e che quindi vengono applicate degli stili che non ci aspettavamo, perché magari semplicemente il CSS è veramente molto esteso. O magari non lo abbiamo scritto tutto quanto noi.

Per poter esaminare che cosa non vada nel nostro CSS abbiamo a disposizione Chrome Dev Tools, l’abbiamo già visto in passato, in altre lezioni e in altri corsi, ma stavolta lo vediamo in maniera specifica per CSS.

Per quanto possa sembrare poco figo, la tecnica migliore per poter capire cosa non sta funzionando a meno che non sia intuibile da codice è il classico spegni e riaccendi delle proprietà. In questo modo vedremo cosa crea il risultato inatteso e saremo un passo più vicini alla soluzione. Per esperienza posso dire che nella maggior parte dei casi si tratta di aver scritto male qualche proprietà o valore.

Chrome Dev Tools per analizzare il CSS

Supponiamo di avere questo HTML

1<main>
2  <h1>Lorem ipsum dolor sit amet.</h1>
3  <p class="intro">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos expedita nemo deleniti animi alias rerum eius illo
4    iste. Ut aliquid est quaerat sapiente. Possimus molestiae suscipit reprehenderit, ipsum quisquam amet.</p>
5  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur commodi illum fugiat nesciunt. Tempore odio
6    consectetur magnam quod quae sunt laboriosam necessitatibus eligendi quaerat, temporibus dolorem aut, nostrum
7    porro velit!</p>
8  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed optio voluptatibus quam fuga, aut repellat quisquam
9    necessitatibus voluptatem consequatur quos ad cumque quibusdam id magni. Itaque ab reiciendis esse enim.</p>
10  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta totam harum cumque molestiae aliquid! Dignissimos
11    dolorum commodi nulla nesciunt eius provident vero libero, non perspiciatis beatae illum neque eum vel.</p>
12</main>

E di avere questi stili

1main {
2  width: 90%;
3}
4
5p:first-of-type {
6  width: 800px;
7  max-width: 100%;
8  margin: 4rem;
9}

Il problema è che da mobile il primo paragrafo va fuori dal viewport per un mix di dichiarazioni errate. Per poter individuare un elemento che va in overflow possiamo aggiungere al nostro CSS quanto segue:

1\* {
2   outline: 1px solid red;
3}

Usiamo outline al posto di border, perché quest’ultimo causerebbe un ulteriore spostamento del layout, andando ad aggiungere a tutti gli effetti due px in più per lato ad ogni elemento.

Visivamente quindi vediamo chi è il responsabile della comparsa della scrollbar orizzontale. Per risolvere il problema possiamo agire in due modi:

1. Rimuoviamo width e max-width delegando il tutto al browser. Problema risolto
2. Modifichiamo max-width togliendo il 100% e scrivendo calc( 100% - 8rem ) dove 8rem è la somma dei 4rem per lato.

E se non avessi accesso al CSS per indagare? Chrome Dev Tools viene in nostro soccorso.

Cliccando sul più in alto a destra possiamo aggiungere un selettore personalizzato.

Facendo riferimento al primo screenshot vediamo l’ordine delle regole. In fondo c’è quel blocco tutti in italico con scritto a destra user agent stylesheet quelli sono gli stili imposti dal browser. Che sappiamo essere meno importanti rispetto a quelli dell’autore del foglio di stile.

Sopra si colloca invece lo stile scritto dall’autore. Il fatto che sia sopra denota il fatto che sia più importante, grazie anche all’uso di un selettore più specifico.

Capire le modifiche che sono state fatte e importarle nel nostro editor

Oltre a creare nuove regole, possiamo anche modificare quelle esistenti, andando ad aggiungere nuove dichiarazioni. Ci sono casi in cui capiterà che modifichiate molti elementi per raggiungere l’obiettivo desiderato e quando avrete finito vorrete sapere cosa avete modificato senza dover star lì a pensare cosa avete modificato e perché.

Fortunatamente, ancora una volta Chrome Dev Tools ci da una mano con il comando Show Changes

Il quale può essere richiamato usando prima la shortcut Ctrl/Cmd + Shift + P, digitando nella command palette Show Changes _o _Mostra Modifiche, il quale aprirà un pannello del dev tool che mostrerà le modifiche apportate

Altre indicazioni che ci da Chrome Dev Tools sullo stato del nostro CSS

Per capire quando una dichiarazione viene sovrascritta la visualizzeremo barrata

Nell’immagine p.intro è specifico quanto p:first-of-type, ma per via della cascata la proprietà background-color di quest’ultimo verrà sovrascritta.

Se dovessimo invece aggiungere al nostro foglio di stile una proprietà che viene ereditata poi dai figli allora la visualizzeremo con la dicitura Inherited from o Ereditata da seguita dal nome dell’elemento o selettore.

In questo caso il nostro paragrafo dal testo viola deve il suo colore alla proprietà color di body.

Infine, se una proprietà non dovesse essere valida perché è stata scritta male verrà indicata con un simbolo di allerta e indicata come proprietà non valida:

Capita spessissimo di fare errori di battitura, quindi fate sempre un doppio check su come avete scritto il nome della proprietà o il valore.