Come usare il tool Ispeziona di Google Chrome.

Come funziona il Chrome Developer Tools ovvero Ispeziona Elemento di Chrome per vedere le anteprime di modifiche al codice e trovare i selettori univoci.

A seguito di un commento che ho ricevuto ritengo sia il caso di illustrare brevemente come effettuare delle modifiche al nostro sito direttamente da soli senza andare a cercare su internet dei tutorial che non sempre vanno bene.

Per quello che riguarda per esempio la piattaforma Blogger ci sono i Nuovi Temi che hanno un modello sostanzialmente diverso a quello cui ci eravamo abituati. Le modifiche apportate all'aspetto dei blog solitamente partono dalla conoscenza della classe o dell'ID dell'elemento su cui vogliamo operare.

La classe si riconosce perché ha un puntino prima della stringa di identificazione mentre l'ID ha il simbolo del cancelletto ( # ). Con una classe si definisce lo stile di una serie di elementi con caratteristiche comuni mentre con l'ID si definisce lo stile di un unico elemento all'interno della pagina.

Tanto per fare alcuni esempi .post-title h3 è la classe del titolo del post di Blogger mentre #Label1 è l'ID del widget delle etichette. Lo Strumento Ispeziona di Google Chrome serve appunto per trovare quelli che si chiamano i selettori cioè le classi e gli ID dei vari elementi per apportare delle modifiche.

Esiste uno strumento analogo anche su Mozilla Firefox che si chiama Analizza Elemento. Entrambi i tool possono essere richiamati con la scorciatoia da tastiera Ctrl+Maiusc+I.

Ho pubblicato sul mio Canale Youtube un video tutorial sulle principali funzionalità di Ispeziona di Chrome.

Si clicca con il destro del mouse sulla pagina da investigare quindi si sceglie Ispeziona dal menù contestuale.

Verrà visualizzato un riquadro che solitamente appare in basso. Andando sul menù del riquadro a forma di tre puntini possiamo però spostare il riquadro sulla destra, sulla sinistra oppure visualizzarlo in una finestra separata.

Nella scheda Elements verrà mostrato l'HTML della pagina. Mentre nella scheda Styles si potranno visualizzare i CSS. Se con il cursore ci si sposta nell'HTML verrà evidenziato di celeste l'elemento della pagina che corrisponde a quella particolare riga di codice. Vediamo come investigare un elemento.

COME MODIFICARE VIRTUALMENTE L'ASPETTO DI UN ELEMENTO

Con Ispeziona elemento possiamo verificare quale effetto otterrebbero delle modifiche apportate al codice. Si clicca sulla icona posta in alto a sinistra del riquadro che diventerà di colore celeste. Successivamente si clicca sull'elemento della pagina su cui vogliamo operare. Può essere un titolo, un widget o una sidebar

In basso verrà evidenziato il codice HTML che si riferisce all'elemento su cui abbiamo cliccato mentre sulla destra ne verrà mostrato il CSS. Spostandoci sulla destra possiamo aggiungere o cambiare attributi

Si clicca sul CSS che dà la regola all'elemento per modificare una riga o per aggiungerne un'altra. Nello screenshot abbiamo aggiunto la riga font-size:48px; per aumentare la dimensione dei caratteri.

Si può anche cambiare il colore utilizzando anche una tavolozza che appare automaticamente. Alcune righe di CSS vengono visualizzate come barrate. Significa che pur essendo presenti non vengono considerate perché sovrascritte da altre regole che sono prioritarie rispetto a quel dato elemento. Ricordo ovviamente che si tratta di modifiche virtuali che non hanno alcun effetto e che scompariranno se si ricarica la pagina. Il Tool Ispeziona di Google Chrome è utile appunto per avere una anteprima delle modifiche che si vogliono apportare.

COME SCOPRIRE IL SELETTORE DI UN ELEMENTO

Un dato molto importante è quello del selettore cioè della classe o dell'ID che sovrintende a quel dato elemento. Si clicca sempre sulla icona in alto a sinistra che diventerà celeste quindi si clicca sull'elemento in oggetto. Verrà individuato e evidenziato il suo HTML. Spostandoci con il cursore si può trovare la riga di codice giusta

Sopra all'elemento verrà visualizzato il suo selettore su sfondo nero. Il selettore lo si potrà anche copiare cliccando con il destro del mouse sulla freccetta nera posta a sinistra dell'HTML per aprire un menù per poi scegliere Copy -> Copy selector. Tale selettore poi potrà essere copiato in un file del Blocco Note e utilizzato per creare un nuovo CSS che lo modifichi nell'aspetto o addirittura che lo nasconda. Nel prossimo post vedremo un esempio di utilizzo sempre in riferimento alla piattaforma Blogger. Lo potete consultare aprendo questa pagina

• Come nascondere o personalizzare la Barra delle Etichette in Blogger