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 era comoda per i grafici meno esperti che in un attimo trasformavano la loro opera in una pagina HTML ma 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, una sua eventuale modifica e velocizzando anche 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 questo sfondo del link 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 l’esempio:

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.
Come possiamo vedere il risultato non cambia.

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 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

Leggi anche:

• Non ci sono articoli correlati

dei commenti - lascia un commento - trackback