Questa è la traduzione dell'articolo Creating easy and useful CSS Sprites di Ignacio Ricci pubblicato originariamente su CSS Globe il 29 Ottobre 2008. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.
Gli sprites CSS sono un modo per combinare insieme delle immagini al fine di ottimizzare il caricamento della pagina riducendo il numero di richieste HTTP al server. In questo articolo vedremo come crearli. Iniziamo subito con il link alla demo.
Per chiarire cos'è uno sprite CSS, ecco l'immagine di uno sprite CSS creata e usata da Google:
Quando fate una ricerca su Google, avete in fondo alla pagina la paginazione. Otterrete qualcosa di simile a Goooooooooooooooogle. La lettera 'o' viene ripetuta usando lo sprite CSS, così, invece di caricare 15 volte la lettera, Google carica lo sprite con tutte le lettere una sola volta.
Passo 1: creare l'immagine di base
Prima di tutto dobbiamo creare un'immagine per lo sprite. Possiamo farlo in Fireworks, Photoshop o qualunque altro programma di grafica. Ecco quella usata in questo articolo:
Come potete vedere, lo sprite consiste di una serie di immagini separate tra di loro con una linea sottile 1px. Questa divisione non è realmente necessaria (come si può vedere dall'esempio di Google visto in precedenza), ma ci semplfica la vita quando metteremo mano al CSS.
Passo 2: creare il rivelatore del nostro sprite
Una volta creata l'immagine di base del nostro sprite, dobbiamo creare un'immagine gid trasparente di 1px x !px. Questa immagine, come vedremo dopo, sarà quella che rivelerà le diverse immagini all'interno del nostro sprite.
Passo 3: il codice CSS
Prima di tutto, creeremo una classe 'sprite' che caricherà l'immagine dello sprite.
.sprite {background:url(../images/mySprite.png);}Dopo il caricamento, dobbiamo definire l'altezza (height) e la larghezza (width) delle immagini all'interno dello sprite.
Dato che tutte le immagini dei mostri hanno la stessa altezza e anche quelle delle applicazioni, possiamo assegnare ad esse una classe che condivide la stessa altezza. Userò i nomi di classe 'monster' e 'application'.
sprite {background:url(../images/mySprite.png);}
.monster {height:128px;}
.application {height:61px;}Ora dobbiamo definire la larghezza di ciascuna immagine, perché è diversa. Useremo una classe per ognuna di esse.
.sprite {background:url(../images/mySprite.png);}
.monster {height:128px;}
.application {height:61px;}
/* Monsters */
.doctor {width:103px;}
.octopus {width:89px;}
.wolf {width:115px;}
.star {width:126px;}
.dog {width:128px;}
/* Applications -*/
.css {width:61px;}
.activityMonitor {width:58px;}
.dashboard {width:51px;}
.quicktime {width:53px;}
.scanner {width:74px;}Tutto fatto? Ecco che arriva la parte interessante. Dobbiamo definire la background-position per ogni immagine per mostrarla nel modo corretto. La background-position dovrà sempre avere valori negativi perché l'immagine di sfondo deve muoversi verso sinistra per rivelare le singole immagini che la compongono. Dobbiamo far sì che ogni immagine nello sprite si muova verso l'angolo superiore sinistro perché è quello il punto in cui dove iniziamo a vedere l'immagine. L'angolo ha come coordinate 0px sull'asse X e 0px sull'asse Y.
Il nostro sprite, tuttavia, ha una parte in eccesso pari a 2px, così dobbiamo tenerne conto quando definiamo la background-position degli elementi.
Ricordate che il primo valore di background-position corrisponde all'asse orizzontale (X) e il secondo a quello verticale (Y). Concentriamoci sulla parte di immagine con il lupo. Dovremo spostarlo di 196px sulla sinistra e di 2px verso l'alto.
.sprite {background:url(../images/mySprite.png);}
.monster {height:128px;}
.application {height:61px;}
/* Monsters */
.doctor {width:103px;}
.octopus {width:89px;}
.wolf {width:115px; background-position:-196px -2px;}
.star {width:126px;}
.dog {width:128px;}
/* Applications -*/
.css {width:61px;}
.activityMonitor {width:58px;}
.dashboard {width:51px;}
.quicktime {width:53px;}
.scanner {width:74px;}Ora completiamo le altre immagini usando lo stesso metodo:
.sprite {background:url(../images/mySprite.png);}
.monster {height:128px;}
.application {height:61px;}
/* Monsters */
.doctor {width:103px; background-position:-2px -2px;}
.octopus {width:89px; background-position:-106px -2px;}
.wolf {width:115px; background-position:-196px -2px;}
.star {width:126px; background-position:-312px -2px;}
.dog {width:128px; background-position:-439px -2px;}
/* Applications -*/
.css {width:61px; background-position:-2px -133px;}
.activityMonitor {width:58px; background-position:-64px -133px;}
.dashboard {width:51px; background-position:-123px -133px;}
.quicktime {width:53px; background-position:-175px -133px;}
.scanner {width:74px; background-position:-229px -133px;}Considerate il posizionamento sull'asse Y degli elementi. È lo stesso per tutti i mostri e per tutte le applicazioni. Questo perché sono allineate nella stessa posizione verticale, hanno tutte la stessa distanza dal bordo superiore.
Passo 4: il codice HTML
Definiamo come src la gif trasparente che abbiamo creato in precedenza, applichiamo le classi ed abbiamo fatto tutto!
<img src="images/transparent.gif" class="sprite monster doctor" alt="Doctor Image" />
<img src="images/transparent.gif" class="sprite monster octopus" alt="Octopus Image" />
<img src="images/transparent.gif" class="sprite monster wolf" alt="Wolf Image" />
<img src="images/transparent.gif" class="sprite monster star" alt="Star Image" />
<img src="images/transparent.gif" class="sprite monster dog" alt="Dog Image" />
<img src="images/transparent.gif" class="sprite application css" alt="Css Image" />
<img src="images/transparent.gif" class="sprite application activityMonitor" alt="ActivityMonitor Image" />
<img src="images/transparent.gif" class="sprite application dashboard" alt="Dashboard Image" />
<img src="images/transparent.gif" class="sprite application quicktime" alt="Quicktime Image" />
<img src="images/transparent.gif" class="sprite application scanner" alt="Scanner Image" />Limiti di questo metodo
Perché un'immagine sprite con i CSS funzioni deve sempre avere una larghezza, un'altezza e una background-position definite. Se non lo fate vedrete l'intero sprite in quell'immagine.
L'esempio è disponibile per il download.
