Il tool Ispeziona Elemento di Chrome per trovare i selettori CSS.

Come analizzare il codice di una pagina web con i tool di Chrome e di Firefox Ispeziona e Analizza Elemento.

Mi avventuro raramente in articoli molto tecnici sia perché sono spesso noiosi sia perché diventano incomprensibili ai più. Con questo post non farò una eccezione visto che affronterò il tema di come scoprire il codice presente in una pagina web in modo molto descrittivo e poco tecnico. Nella mia modesta Guida all'HTML ho affrontato anche la parte riguardante i CSS. Da qualche tempo si è passati dal CSS2 al CSS3 che è supportato dai browser più recenti. In definitiva i CSS sono delle dichiarazioni che servono a selezionare una o più parti di un documento per applicare una regola specifica. L'individuazione degli elementi a cui applicare la regola avviene tramite quelli che si chiamano selettori.

I selettori più semplici sono formati dai tag HTML o XHTML e la regola viene inserita tra parentesi graffe. Tra l'apertura e la chiusura delle due graffe vengono inseriti gli attributi che determinano l'aspetto dell'elemento selezionato. Ecco alcuni esempi di CSS:

h1 {color: #222;}
p {background: #FFF; font: 12px Verdana, sans-serif;}
table {width: 200px;}

Il primo determina il colore del titolo, il secondo lo sfondo e famiglia e dimensione dei caratteri dei paragrafi mentre il terzo la larghezza di una tabella. I selettori sono rispettivamente h1, p e table. I selettori possono essere raggruppati attraverso l'uso della virgola

h1, h2, h3 { color:#003366;}

Esistono poi il selettore universale, non molto usato in verità

* { color: #000; }

e i selettori discendenti che vengono dichiarati così

div p {color: #000;}             1)
p strong {color: #0FF;}         2)

e che devono essere interpretati in questo modo. La regola 1) va applicata a tutti i paragrafi discendenti da elementi div, che siano cioè inclusi tra due tag <div> e </div> che li contenga. Mentre la regola 2) si applica a gli elementi <strong> che si trovino all'interno di due tag <p> e </p>. Blogger ha i suoi selettori specifici oltre a quelli classici di tutti i CMS. Il browser Google Chrome fin dall'inizio ha inserito di default dei tool per gli sviluppatori in grado di rilevare quali siano i selettori di un elemento e quindi di poter agire per modificarne l'aspetto o per carpirne il codice. Successivamente anche Firefox ha implementato questa possibilità. Ricordo che su Firefox è comunque presente l'estensione Firebug che è in grado di svolgere anche questo compito.

COME ANALIZZARE UN ELEMENTO CON CHROME

Dopo aver selezionato l'elemento si clicca sul destro del mouse e si sceglie Ispeziona elemento dal menù contestuale. Si aprirà una finestra popup a fondo pagina con una miriade di informazioni



Nell'elemento selezionato si visualizzerà anche il selettore a cui fa riferimento

Se cliccate sulla immagine si vedrà che in questo caso è h3.post-title. La finestra posta in basso è divisa in due parti. Sulla sinistra si visualizza l'HTML che produce quell'elemento mentre sulla destra la regola del CSS a cui fa riferimento

Non sto a elencare tutte le cose che si possono fare. Mi limito a ricordare che si può andare sul destro del mouse sul codice evidenziato per copiarlo in un file di testo

Se si va su Delete node possiamo visualizzare la pagina senza quel codice. Ovviamente l'elemento scomparirà solo dal nostro browser e non dal web. Ho postato un video su questo tool di Chrome

COME ANALIZZARE GLI ELEMENTI CON FIREFOX

Se si utilizza Firefox c'è a disposizione un tool simile. Si clicca sul destro del mouse nella pagina da investigare per aprire il menù contestuale e si sceglie Analizza elemento



In basso si clicca sulla seconda icona a partire dalla sinistra. Spostandoci con il mouse attraverso la pagina visualizzeremo i selettori di tutti gli elementi presenti

Una volta che siamo risaliti al selettore è possibile impostare una nuova regola che può essere aggiunta al nostro modello. Se utilizziamo il Designer Modelli o i template a Visualizzazione Dinamica possiamo andare su Modello > Personalizza > Avanzato > Aggiungi CSS e incollare un codice come questo

h3.post-title {
font-size: 24px;
color: #000;
text-decoration:underline;
}

che modifica l'aspetto del titolo del post riguardo a dimensione dei caratteri, colore e sottolineatura. Alternativamente si può andare su Modello > Modifica HTML e cercare la riga di codice ]]></b:skin> per poi incollare subito sopra la nuova regola CSS che abbiamo creato tramite Ispeziona elemento.