4 semplici tecniche per eseguire rapidamente il debug e correggere il codice CSS in quasi tutti i browser

4 semplici tecniche per eseguire rapidamente il debug e correggere il codice CSS in quasi tutti i browser

Hai progettato il layout perfetto per il tuo nuovo e imminente sito web. Ma ora la conversione di tutto ciò che bella Photoshop PSD file a strati in un codice perfetto pixel è la parte difficile. Non è impegnativo perché non sai come codificare, ma più impegnativo perché diversi browser rendono il tuo codice in modo diverso, anche quando stai usando un codice CSS completamente valido per visualizzare quel fantastico codice semantico HTML5 che hai scritto. Questo è ancora più frustrante quando si fissa un bug in un browser ora diventa un nuovo bug in un altro browser. Anche se questo non è impegnativo, ora immagina di essere assegnato a correggere il codice di qualcun altro che è dappertutto. Spesso questo ultimo caso è quello che ti fa tirare i capelli e dire numerosi WTF prima di capire completamente cosa sta succedendo nel loro codice, perché probabilmente conosci il tuo intero foglio di stile a memoria e questo nuovo codice non è vicino a nessuna convenzione di codifica. Tuttavia, momento di scendere e sporco con il debug che il codice CSS è molto più semplice e meno frustrante rispetto a prima, grazie a questi strumenti e tecniche molto semplici.

1) Inspect Element Tool

Inspect element è di gran lunga lo strumento migliore per avviare il debug di qualsiasi cosa CSS. Se stai sviluppando siti web, allora hai bisogno del giusto set di strumenti di sviluppo web. E fortunatamente Inspect Element è ora integrato nativamente con tutti i browser Web moderni come parte dei loro strumenti di sviluppo. Questo strumento consente di selezionare l’elemento specifico nella pagina che si desidera correggere e vedere immediatamente quali regole CSS vengono applicate a quell’elemento che causano la visualizzazione dell’elemento selezionato in questo modo. Tutto quello che dovete fare è solo fare clic destro e selezionare “Inspect Element” dal menu contestuale.

Ora hai pieno accesso visivo a tutte le regole che vengono calcolate per quell’elemento. Se non è stato selezionato l’elemento giusto, è sufficiente fare clic sull’origine e puntare l’elemento esatto che si desidera diagnosticare. Come vedi nello screenshot qui sopra, ora puoi modificare le tue regole CSS. Utilizzando la casella di controllo sul lato sinistro di ogni proprietà CSS è possibile attivare quella proprietà, o anche fare clic sulla proprietà e modificarne il valore, o anche premere il tasto invio e aggiungere nuove regole per il proprio elemento. Ancora più sorprendente è la facilità con cui è possibile eseguire il debug di uno stato di hover di un elemento semplicemente aprendo il menu a discesa accanto all’elemento selezionato e scegliendo :hover state. Come puoi vedere nel pannello di destra, questo fantastico strumento ti mostra anche il file del foglio di stile e il numero di riga della regola CSS che viene eseguita in questa pagina. Inoltre, è più comprensibile capire perché il nostro elemento ha un padding superiore e inferiore 10px invece di 5px, perché la regola alla riga 1026 di stile.css della nostra media query CSS sovrascrive la vecchia regola sulla riga 916 dello stesso file. È anche possibile vedere il modello a scatola dell’elemento selezionato con le sue dimensioni correnti senza utilizzare un righello o uno strumento di misura di terze parti. Avere questa ricchezza di informazioni ora rende il nostro lavoro di debug molto più facile. Supponiamo che il campo del modulo e-mail del foglio di stile non sia simile ad altri elementi di input e ti chiedi come potresti risolvere questo problema. Si ispeziona quell’elemento e si scopre che poiché si utilizzano i nuovi tipi di campo di input HTML5, il progettista del tema non ha incluso alcuna regola CSS per input, quindi si aggiunge questo selettore al foglio di stile.

input,input{ border: 1px solid #ccc;}

Google Chrome ha anche strumenti di sviluppo simili che consentono le stesse funzionalità. E ‘ anche possibile modificare la modalità di debug per la risoluzione dello schermo di un dispositivo che si desidera testare il layout e scoprire come il vostro media query CSS si comporta in queste condizioni.

Questi strumenti di sviluppo hanno funzionalità molto potenti anche oltre lo sviluppo CSS come l’ispezione DOM, la profilazione JavaScript, la console JavaScript, gli strumenti di monitoraggio delle risorse e tutta un’altra serie di funzionalità che necessitano della propria sezione tutorial oltre questo articolo. Come si può vedere nella foto qui sopra, in Chrome developer tools, è anche possibile emulare diversi user agent del browser, o anche emulare eventi touch come strisciata. Con questi strumenti non hai nemmeno bisogno di eseguire attivamente il debug CSS nel browser mobile dello smartphone, almeno in una certa misura.

Quali strumenti di sviluppo del browser è il migliore è una domanda che scoprirai sperimentando. Alla fine della giornata tutto dipende da cosa stai cercando di ottenere e se quel set di strumenti ti consente di raggiungere il tuo obiettivo finale. Io personalmente uso tutti questi strumenti a mio vantaggio. Ognuno ha qualcosa che mi piace e trovo utile quando voglio eseguire il debug del mio codice. Ad esempio, trovo la piccola rappresentazione a colori quadrata dei colori esadecimali accanto alle proprietà del colore CSS in qualche modo utile, anche se posso elaborare il colore RGB nella mia testa e ottenere una visualizzazione approssimativa del palato del colore, queste piccole differenze mi fanno alternare tra questi strumenti di sviluppo.

Firebug

Firebug è stato uno dei primi strumenti che hanno fornito funzionalità inspector. È uno degli strumenti di sviluppo web più popolari, con quasi 3 milioni di utenti medi giornalieri. Al momento della stesura di questo articolo, gli strumenti di debug CSS di Firefox sono abbastanza adeguati per me da non usare Firebug, tuttavia per il debug JavaScript in Firefox uso ancora Firebug.

Paura di IE7? Non esserlo più

Potresti essere sorpreso, ma Internet Explorer ha anche la funzione Inspect Element (Ctrl + B) nei loro strumenti di sviluppo (F12). Sebbene non sia così amichevole come gli strumenti di sviluppo di altri browser, questa funzionalità integrata in Internet Explorer 9 è molto utile per testare i layout in modalità emulata IE7 e IE8. Ai tempi in cui nessuno di questi strumenti di sviluppo era disponibile per il debug di vecchi browser IE, questa seconda tecnica di solito era molto utile.

2) Debug in Style

Buono come Inspect Element è, a volte non si ha accesso a tale strumento, come i browser mobili, o si desidera regolare lo stile di un paio di elementi nella pagina invece di uno specifico. Mi piace conoscere i confini dell’elemento che sto stilando, quindi so se ci sono overflow, o problemi fluttuanti, o ecc. Per questo motivo aggiungo un colore di sfondo luminoso e evidente all’elemento attivo che sto stilando e tolgo il colore di sfondo una volta terminato lo styling. A volte, vado avanti e indietro regolando questi elementi, quindi sposto il codice di debug alla fine del mio foglio di stile e lo commento, e decommento una volta che ne ho bisogno di nuovo. In questo modo posso passare rapidamente alla modalità di debug e vedere come ogni elemento è posizionato sullo schermo.

Che si traduce in …

Per questo esempio ho appena aggiunto il codice di debug agli elementi di blocco della struttura principale nella mia pagina. Ora posso dire dove inizia ogni post e quanto spazio c’è tra ogni post o elemento widget nella mia barra laterale, e se voglio aggiungere uno spazio tra la barra laterale e il contenuto principale, posso vedere visivamente in colori vivaci.

L’opposto di questo è anche possibile, definendo una serie di regole di debug e aggiungendo quella classe a qualsiasi elemento che vogliamo vedere. Ad esempio, sopra ho definito una nuova classe chiamata debug con il seguente codice.

.debug{ border:1px solid red; }

e ogni volta che voglio eseguire il debug di qualsiasi elemento, aggiungo semplicemente la classe di debug a quell’elemento.

<div class="foo debug">Div element with foo and debug classes</div>

3) Debug CSS usando JavaScript

Questa tecnica è molto simile a sopra, tuttavia a volte per alcuni strani motivi capita che la situazione di cui sopra non sia fattibile. Questo è un pezzo di codice jQuery che viene in nostro aiuto applicando la classe di debug all’elemento foo, o anche aggiungendo CSS direttamente all’elemento bar in questo caso.

$(document).ready(function(){ $('.foo').addClass('debug'); $('.bar').css('border' : '1px solid blue'); });

Questa situazione potrebbe accadere molto raramente, ma so di aver usato questa tecnica in passato, quindi è bene saperlo.

4) Conosci la cascata

Alcuni problemi CSS sono così comuni come i float di compensazione che cadrai in quella trappola una volta, e la prossima volta che incontri qualcosa di simile, sai cosa ha causato il problema e come risolverlo. In generale, la maggior parte dei problemi CSS sono facili da risolvere se si sa come le regole CSS si sovrascrivono a vicenda. Ad esempio, selettori più specifici sovrascriveranno quelli più generali, o il selettore ID sovrascrive il selettore di classe, o la dichiarazione !important ha la precedenza su una dichiarazione normale. Conoscere la cascata ti aiuterà a risolvere il codice dei fogli di stile a cascata più velocemente.

Ecco un esempio direttamente dalle specifiche W3C su come funziona la specificità del selettore.

Alcuni esempi:

<HEAD><STYLE type="text/css"> #x97z { color: red }</STYLE></HEAD><BODY><P ID=x97z style="color: green"></BODY>

Nell’esempio precedente, il colore dell’elemento P sarebbe verde. La dichiarazione nell’attributo “style” sovrascriverà quella nell’elemento STYLE a causa della regola a cascata 3, poiché ha una specificità più elevata. Se pensi che questo esempio sia difficile da capire, controlla questo articolo sull’Ordine di precedenza CSS.

Note finali

Raggiungere risultati pixel perfect è difficile a causa di diversi rendering da diversi browser. Alcuni vecchi browser non supportano CSS3 completo o HTML5, in modo da controllare HTML5SI prega di progetto della comunità per vedere se la sintassi che si sta tentando di utilizzare è supportato dalla maggior parte dei browser. Tuttavia, è possibile utilizzare facoltativamente fallback o polyfill per fornire funzionalità mancanti per i browser che non supportano l’implementazione completa di CSS3 o HTML5.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.