Come eseguire il debug CSS con gli strumenti di sviluppo del browser

CSS non è un linguaggio di programmazione. Eppure, a seconda di chi chiedi, ti dirà che scrivere un buon CSS a volte può essere difficile come scrivere in linguaggi di programmazione come Java o JavaScript.

In questo articolo, voglio mostrarti alcuni trucchi su come eseguire il debug dei problemi CSS per risolverli. Come un buon sviluppatore web, si dovrebbe avere familiarità con gli strumenti di sviluppo del browser (ad esempio da Google Chrome) così useremo quelli.

Modalità wireframe

Problemi di layout? Forse un aspetto più simile al wireframe ti aiuterà a capire meglio il tuo layout. La seguente regola CSS farà in modo che ogni elemento abbia uno sfondo nero, un colore del testo verde e un bordo rosso. Puoi aggiungere la regola nel tuo foglio di stile o direttamente nel tuo browser. A seconda del tuo caso d’uso, puoi persino migliorare questa regola. Non dimenticare di disabilitarlo in produzione!

*{
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}

Proprietà di stile calcolate

Alcuni strumenti di sviluppo del browser (ad es. Chrome developer tools) offrono una vista che visualizza le proprietà di stile che vengono applicate a un particolare elemento. Qui, puoi anche vedere per ogni proprietà di stile dove è stata impostata.

Test delle query CSS direttamente nel browser

A meno che non si stiano inlinando gli stili, è necessario creare blocchi di dichiarazione CSS validi. A volte, i selettori CSS possono diventare complicati da leggere e scrivere. Un modo rapido per verificare se i selettori CSS funzionano correttamente è cercare direttamente negli strumenti di sviluppo del browser. Puoi cercare sia i selettori di testo che quelli CSS.

Commutazione degli stati degli elementi

Alcuni elementi come i campi di input sono in stile quando sono focalizzati. Altri elementi come pulsanti reagiscono quando si passa con il mouse su di loro. La maggior parte degli strumenti di sviluppo del browser consente di alternare gli stati degli elementi come focus o hover. Tuttavia, se un listener DOM è in ascolto per questo evento, l’attivazione dello stato di un elemento di solito non genera un evento che sarebbe stato registrato da questo listener.

Conclusione

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.