» CSS Sprite, rollover immagini e menu

Non troppo tempo fa, la grafica di una pagina HTML era costituita da uno sfondo che veniva ritagliato con un programma di grafica in segmenti più piccoli, detti slice, i quali venivano usati come background di celle di una grande tabella per formare il template del sito.
Questa tecnica, comoda per i grafici meno esperti che in un attimo trasformavano la loro opera in una pagina HTML, complicava decisamente la vita a chi doveva poi inserirvi il codice limitandolo ai bordi delle celle predefinite.
Un migliore utilizzo del CSS ha risolto questo problema dando la possibilità di inserire queste immagini grafiche come sfondo degli elementi HTML, rendendo il codice della pagina più leggero e semplice da leggere ai motori di ricerca, semplificando quindi anche il lavoro dell’esperto di SEO e liberando lo sviluppatore dai confini delle celle della tabella grafica.
I CSS Sprite rappresentano un’evoluzione naturale di questo concetto, migliorando ulteriormente la leggibilità del codice e una sua eventuale modifica, oltre a velocizzare il lavoro del webdesigner.

COS’E’

Per capire come funziona e cos’è un CSS Sprite facciamo riferimento ad un tutorial precedente dove si spiegava come utilizzare un’unica immagine per creare dei bottoni con effetto di rollover.
In quel caso lo Sprite era lo sfondo dell’elemento HTML A che al passaggio del mouse, seguendo la regola CSS specificata, veniva spostato in fondo, visualizzando la diversa porzione di grafica.
Il CSS Sprite è questo, un’unica immagine di cui ne viene visualizzata la porzione specificata come proprietà nel foglio di stile.
Vediamo come utilizzarlo per trarne i maggiori vantaggi.

COME FUNZIONA

Prendiamo il caso di un semplice menu con un’ icona diversa per ogni link.
La soluzione più logica sarebbe ritagliare ogni icona con il suo effetto di rollover e inserirla come background di ogni ancora del menù: un modo semplice per lasciare il codice pulito e facile da leggere.
Ma è facile capire che per ogni immagine diversa che viene caricata ci sarà una nuova HTTP request che rallenterà la visualizzazione della pagina.
Utilizzando la tecnica del CSS Sprite riduciamo il numero delle richieste da 10 (5 per lo stato di default più 5 per il relativo stato di rollover) a 1, caricando un’unica immagine con tutte le icone che ci servono.

Vediamo prima di tutto il codice HTML, in cui creo una Unordered List (UL) con un collegamento ipertestuale A su ogni List Item (LI):

e ora nel nostro foglio di stile CSS settiamo le proprietà per l’unica immagine di sfondo caricata su ogni A presente nei vari LI:

Come vedete l’immagine viene richiamata un’unica volta per caricarla come background del tag A per poi esserne definita la posizione in base alla classe.
Per calcolare la posizione sull’asse Y possiamo utilizzare qualsiasi programma di grafica in grado di visualizzare le coordinate X e Y e poi inserire la posizione Y in negativo, data dalla somma 0 – posizione asse Y dell’icona in questione: l’immagine che fa da sfondo al collegamento verrà alzata di tanti pixel quanto specificato nella regola CSS.

Come possiamo vedere il risultato non cambia rispetto all’inserire una diversa immagine per ogni collegamento del nostro menù.

Oltre a diminuire drasticamente il numero di HTTP request, diminuisce anche il peso complessivo delle immagini caricate, allegerendo la pagina e velocizzandone la visualizzazione, per non parlare del foglio di stile CSS che avrà meno proprietà da aggiungere e file di background da gestire.
Nel nostro caso, trattandosi di poche e piccole icone, la differenza è minima sia in kb che in velocità di caricamento ma pensate ad interi siti che utilizzano questa tecnica, i risultati si vedrebbero ad occhio nudo e ogni eventuale modifica sarebbe molto più semplice da fare.

Ritieni questo post utile o interessante?
Condividi e Segnala

css menu, css rollover, css sprite, css tutorial, rollover immagini, rollover menu

Leggi anche:

• Bottoni rollover col CSS
  Per chi ancora usa Javascript per inserire bottoni in rollover all'interno del proprio sito eccovi un tutorial per il CSS rollover, semplice ma molto funzionale. I vantaggi rispetto all'uso del rollover Javascript sono il funzionamento sui browser con lo script disabilitato, implementazione velocissima, migliore leggibilità del testo da parte del browser e dei motori di ricerca [...]