Pubblicato il 29/05/13e aggiornato il

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

ispeziona-elemento

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

trovare-selettore-google-chrome

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

ispezionare-elemento-chrome

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

copiare-codice-elemento

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

analizza-elemento-firefox

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

analizzare-elemento-firefox

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.






8 commenti :

  1. Ciao :) visto questo post che parla di codice, colgo l'occasione di farti una domanda: sapresti consigliarmi un testo aggiornato (anche in inglese) valido per cominciare a imparare xml? Cercavo un testo che parte dalla base per comprendere tutto, o perlomeno quanto più possibile si possa mettere su un testo su xml.
    Ti ringrazio :)
    ps.
    Bellissimo blog, per me ora è un punto di riferimento sulle novità che offre blogger e non solo, sicuramente è anche grazie a te che da tempo mi sono appassionato alla programmazione :)

    RispondiElimina
    Risposte
    1. @# Dipende dal livello che vuoi raggiungere. Ci sono corsi online in italiano che danno delle buone conoscenze
      http://www.html.it/guide/guida-xml-di-base/

      Elimina
  2. Sono rimasto sulla pagina e ho visto che hai già risposto! :) Le guide di html.it sono molto buone e mi sono servite, mi serviva qualcosa che vada oltre, almeno intermedio, poi vista la vastità di applicazione del linguaggio deciderò cosa approfondire. Diciamo però che mi serve sia per il web che per i database, considera però che php non lo conosco (ancora) :), quindi hai già capito cosa mi servirebbe, però non solo siti dinamici.

    RispondiElimina
    Risposte
    1. Io avevo notato un libro in inglese di un anno fa "beginning xml" la quinta edizione, di Fawcett e Quin, però non so quanto possa essere valido, e per di più in Italiano non ho trovato praticamente nulla che non abbia almeno una decina di anni. Se sai darmi qualche dritta per il livello che voglio raggiungere mi servirà davvero molto, in quanto su xml brancolo nel buio per trovare un riferimento di apprendimento, eppure sto scoprendo giorno dopo giorno che è così fondamentale...

      Elimina
  3. Ciao, ho una domanda da fare:
    Voglio inserire un documento/pdf, (si tratta di un test per una candidatura di lavoro) attraverso ispeziona elemento del browser di Google Chrome. Sapete dirmi come fare? Grazie in anticipo

    RispondiElimina
    Risposte
    1. Con Ispeziona elemento non si può inserire nulla. Per incorporare documenti PDF, Word o simili si può usare Google Drive
      http://www.ideepercomputeredinternet.com/2014/06/google-drive-incorporare-documento-pagina-web.html
      o OneDrive
      http://www.ideepercomputeredinternet.com/2014/02/onedrive-word-excel-powerpoint-office-online.html
      @#

      Elimina
  4. salve, come faccio ad individuare il file che visualizzo con ispeziona elemento? questa funzione non mi da indicazioni sul titolo o altro ...
    grazie
    massimo

    RispondiElimina
    Risposte
    1. Ispeziona elemento dà l'indicazione di quello che è il selettore univoco cioè la classe di stile dell'elemento de layout che ti interessa. Per saperne di più leggi questo post che è più preciso
      http://www.ideepercomputeredinternet.com/2015/07/ispeziona-elemento-chrome-selettore-univoco-css-html.html
      oppure impara a usare Analizza elemento di Firefox che è più semplice
      http://www.ideepercomputeredinternet.com/2014/12/analizza-elemento-firefox.html
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.