Tempo di lettura stimato: 3 minuti

Torniamo a parlare di CSS. Oggi vediamo una tecnica da sempre consigliata per alleggerire le pagine e velocizzare i tempi di caricamento (non per niente da anni è utilizzata sulla homepage di Google).

In breve si tratta di includere la maggior parte degli elementi di navigazione della pagina all’interno di un unico file immagine, per poi richiamarlo tante volte quante ne richiederà la pagina evitando così il caricamento di più immagini differenti.

Anche se tecnicamente lo scarto di tempo è molto esiguo (siamo nel campo dei centesimi, se non millesimi di secondo) la differenza si vede, ed anche dal punto di vista estetico trovarsi le immagini caricate tutte in una volta da un’impressione di maggior velocità.

Vediamo ad esempio l’immagine che utilizza Google nelle sue ricerche:

Qualcuno avrà già riconosciuto alcuni elementi costantemente richiamati all’interno della pagina delle ricerche, come ad esempio il logo, la “O” ripetuta a fondo pagina, le frecce di direzione che indicano pagina precedente e successiva, la favicon, le stelle per la valutazione dei risultati e mi fermo qui.

Per l’inclusione dell’immagine all’interno della pagina Google utilizza in parte Javascript e in parte i CSS. Non mi dilungherò sui princìpi alla base di questa scelta, basti sapere che la mole di richieste che ogni giorno Google deve evadere è così ampia che anche una minima ottimizzazione della pagina corrisponde ad un risparmio notevole (economicamente ed ecologicamente) per Google stessa e per tutti noi.

Lasciando perdere per oggi Javascript passiamo ad analizzare i passaggi perché l’effetto venga restituito utilizzando solo HTML e CSS. Iniziamo con qualcosa di semplice: il bottone seguente è formato da due immagini. I passaggi che vedremo serviranno a creare l’effetto rollover al passaggio del mouse con una sola immagine. L’immagine totale misura 343 pixel di larghezza x 212 pixel in altezza: è molto grande per essere un bottone, ma questo è semplicemente un esempio.

Iniziamo a vedere come formattare l’HTML.

<a id="contattaci" href="#" title="contattaci"><span>Contattaci</span></a>

Questa sarà la riga HTML che mostrerà il bottone all’interno della pagina. Da notare l’attributo “ID” il cui stile verrà poi modificato tramite i CSS. E’ facile notare che la riga qui sopra in realtà non contiene link ad alcuna immagine, è semplicemente un link testuale: “Contattaci“.

Ed ora vediamo come impostare il CSS per trasformare il nostro link in un bottone con effetto rollover del mouse:

#contattaci{
  display: block;
  width: 343px;
  height: 106px;
  background: url("img/bottone.png") no-repeat 0 0;
}

#contattaci:hover{
  background-position: 0 -106px;
}

#contattaci span{
  display: none;
}

Occhio a richiamare l’immagine giusta. Io l’ho messa nella directory “img“. Il bottone è molto grande, com’è semplice notare la larghezza è quella iniziale dell’immagine (width: 343px;), mentre l’altezza è esattamente la metà (height: 106px;). Nel caso in cui il mouse non passi sopra al bottone verrà mostrata la metà superiore del bottone (i primi 106 pixel), mentre se vediamo la seconda regola alla voce “background-position” possiamo notare un valore negativo “-106px“. Questa regola posizionerà il bottone 106px in alto, facendoci di fatto vedere solo la seconda metà dell’immagine nella stessa posizione in cui si trovava la prima.

La terza regola serve semplicemente a nascondere il testo “Contattaci“.

Per avere l’anteprima del funzionamento clicca qui.