Come usare Analizza elemento di Firefox per trovare i selettori e modificare il layout del sito.

Come funziona lo strumento Analizza Elemento di Firefox per trovare i selettori univoci e per modificare le pagine web.

I browser moderni hanno tra le funzionalità anche quelle che permettono agli sviluppatori di conoscere a quali regole CSS obbedisce un particolare elemento del layout. Ricordo in tal senso il tool Ispeziona elemento di Chrome e l'estensione sempre di Chrome Stylebot per trovare quelli che sono i selettori di particolari elementi del layout.

A chi sembra arabo quello che ha appena letto consiglio di consultare il mio ebook gratuito Guida all'HTML e al CSS in cui si potranno trovare le informazioni propedeutiche per affrontare queste tematiche. In questo post mi limiterò a fare dei semplici esempi per mostrare il funzionamento dello strumento Analizza Elemento di Firefox simile al corrispettivo Ispeziona elemento di Chrome ma più funzionale. La regola che sovrintende all'aspetto della data in un blog di Blogger è solitamente data da questa classe h2.date-header mentre i parametri che ne determinano il layout sono racchiusi tra due parentesi graffe in questo modo h2.date-header { …. } . Queste regole denominate CSS possono essere incollate nel modello nella sezione <b:skin>. Di solito per questioni di semplicità vengono incollate subito sopra alla ultima riga di questa sezione che è ]]></b:skin>.

I CSS possono anche essere inseriti sopra alla riga </head> ma solo se vengono inseriti tra i tag <style> e </style> . È anche possibile utilizzarli inline direttamente nell'HTML con la sintassi style="… CSS …". Per modificare una parte del nostro blog è quindi necessario conoscere il selettore specifico per quell'elemento. Con il tool Analizza elemento di Firefox si può trovarlo in modo piuttosto semplice e solo con un paio di click.

ANALIZZA ELEMENTO E SELETTORE UNIVOCO

Dopo aver aperto la pagina in oggetto con Firefox si clicca con il destro del mouse sul punto del layout che vogliamo investigare quindi selezioniamo Analizza elemento nel menù contestuale 

Nella parte bassa della scheda del browser si aprirà una finestra popup

L'elemento del layout analizzato si evidenzierà di celeste e sopra a questo si potrà visualizzare il suo selettore. Sulla destra si potranno anche vedere i CSS relativi a quel dato elemento sempre che siano presenti. Spostando il mouse in basso si può passare da un elemento all'altro. Sulla destra si possono anche operare delle modifiche e vedere cosa comportino come cambiamento di aspetto

Le righe di codice tra le parentesi graffe hanno un segno di spunta. Eliminando tale spunta si può vedere come muta l'aspetto della pagina senza quella particolare riga



Volendo si possono anche cambiare i parametri per poi vedere cosa succede

Nello screenshot precedente è stato modificata la famiglia di font e la dimensione del carattere inoltre sono state introdotte nuove righe per il colore e per il corsivo. Come vedete il browser mostrerà immediatamente come sarà il nuovo elemento. Se il risultato ci soddisfa possiamo andare su Modello > Modifica HTML e cercare la riga del selettore con Ctrl+F. In questo caso è h3.post-title e quindi modificare il codice per poi salvare il template.

Non sempre un elemento ha un suo particolare codice nel template ma conoscendone il selettore univoco possiamo modificarlo a piacere. Poniamo per esempio si voglia operare sul numero dei commenti presenti nella homepage di Blogger sotto a ciascun post come mostrato qui sotto

Si visualizza il selettore relativo in uno sfondo nero subito sopra all'elemento. In questo caso si tratta di span.post-comment-link e per modificarne l'aspetto dobbiamo creare una regola come questa

span.post-comment-link {font-size:22px; font-weight:bold;}

dove sono stati inseriti dimensione e grassetto. Questo codice va incollato nel modello subito sopra alla riga ]]></b:skin> per poi salvare il template con questo risultato

Può capitare che un comando non venga recepito perché c'è un altro CSS nativo del blog che è in contrasto. In tal caso bisogna aggiungere !important per dire al browser di privilegiare quella regola

span.post-comment-link {
font-size:22px !important;
font-weight:bold;
} 

Se l'elemento in oggetto è un link prenderà il colore ereditato dal blog. Dovremo quindi aggiungere una nuova regola per integrare la precedente in cui si aggiunge a al selettore già trovato

span.post-comment-link a {color:#f00 !important;}

con questo risultato

Questa procedura può essere usata da tutti coloro che vogliono modificare il proprio sito in modo non troppo complicato senza andare a cercare in rete dei tutorial specifici per l'elemento che gli interessa. Il sistema è utile pure per scoprire i CSS di un sito non nostro che abbia però un aspetto che ci piaccia. In questo ultimo caso è consigliabile anche digitare Ctrl+U per visualizzare il codice sorgente della pagina per avere conferme dell'esistenza dei selettori trovati con le rispettive regole.