Vai ai contenuti

LAU



Home > realizzare > accessibilità: fogli di stile > CSS Sprites: cosa sono e come utilizzarli


CSS Sprites: cosa sono e come utilizzarli

Utile tecnica CSS per ridurre il peso delle immagini all'interno delle pagine web.

A cura di: Fabio Regina | 2 marzo 2009


Cosa sono

I Css Sprites sono una tecnica che, sfruttando le potenzialità dei CSS, consente di ridurre drasticamente il numero di richieste http al server, rendendo, pertanto, più veloce il caricamento delle pagine web. Non a caso siti come Google, YouTube e Yahoo, quotidianamente visitati da milioni di utenti, traggono vantaggio dall'utilizzo di questa tecnica.

Come utilizzarli

La tecnica consiste nell'assemblare in un un'unica immagine le varie immaginette che compongono una pagina web: loghi, sfondi per link, iconografie, etc. Ciò significa che il server elaborerà una richiesta unica anziché una per ciascuna immaginetta ritagliata.

Nell'esempio che segue, realizzeremo due pulsanti grafici (uno per lo stato a:link e uno per lo stato a:hover), un'iconografia per la segnalazione dei collegamenti a documenti pdf, a feed rss e a pagine esterne e, infine, un logo con effetto rollover.

In prima istanza creiamo le immagini separate.

logoFig. 1: logo.gif

logo hoverFig. 2: logo_hover.gif

pulsanteFig. 3: pulsante.gif

pulsante hoverFig. 4: pulsante_hover.gif

link esternoFig. 5: esterno.gif

pdfFig. 6: pdf.gif

rssFig. 7: rss.gif

Dopodiché raggruppiamo tutte le immaginette in una sola grande immagine contenente tutte le immagini da visualizzare. L'immagine così creata, una volta richiamata dai fogli di stile, verrà caricata interamente, ma grazie alla proprietà background-position, sarà possibile visualizzare all'occorrenza solo la parte di immagine che ci interessa.

Esistono diversi tool sia online che offline che consentono di generare automaticamente, a partire da due o più immaginette separate, un'immagine unica. Spesso questi tool, oltre a semplificare il lavoro forniscono anche il calcolo automatico delle coordinate da usare nel CSS per impostare la posizione dell'immagine.
Vediamo un esempio di report fornito da uno dei tool utilizzati per la generazione dell'immagine:

Immagine unicaFig. 8: report con le coordinate per ogni immagine

Di seguito, una lista di tool online e offline:

Nonostante l'utilità di questi tool, se scegliamo di assemblare le nostre immagini manualmente, saremo noi a calcolare le coordinate da utilizzare nel CSS.
Ecco l'immagine:

Immagine unicaFig. 9: immagine_unica.gif

Si tratta di una gif che pesa appena 10 Kb contro i 23 Kb complessivi delle immagini separate. Il peso ridotto dell'immagine e la richiesta unica fatta al server consentiranno un più veloce caricamento della pagina web.

Adesso, non ci resta che implementare il tutto in (X)html e CSS2.

Primo step: il logo
Di seguito la parte di codice relativa al logo:

(X)html:

<a id="logo" href="#">LAU</a> 

CSS:

a#logo{
background-image:url(img/immagine_unica.gif);
backgroun-position: 0 0;
display:block;
width:199px;
height:69px;
}

Vediamo che è sufficiente attribuire un valore all'attributo id, associato al collegamento ipertestuale, per richiamarne la formattazione. Richiamiamo l'immagine di sfondo, denominata "immagine_unica.gif", e ne definiamo la posizione; nel caso specifico l'immagine si sposterà di 0px da sinistra verso destra e di 0px dall'alto verso il basso. Al fine di visualizzare l'immagine è necessario specificare anche la larghezza e l'altezza.
Naturalmente, è possibile definire con una sola dichiarazione le proprietà espresse sopra, ovvero:

background:url(img/immagine_unica.gif) 0 0;
display:block;
width:199px;
height:69px;
}

Per creare un effetto rollover sull'immagine è sufficiente cambiare la sua posizione nello stato :hover.

CSS:

a#logo:hover{
background:url(img/immagine_unica.gif) 201px -188px; }

Ecco il risultato (provate a posizionarvi con il mouse sopra il logo):

Secondo step: i pulsanti
Di seguito la parte di codice relativa al pulsante grafico:

(X)html:

<a id="pulsante" href="#"></a>

Andiamo a richiamare, tramite css, l’id associato al link ("pulsante"). Per applicare l’immagine di sfondo è sufficiente richiamare l’immagine unica e spostarla per ottenere l’effetto desiderato.

CSS:

a#pulsante{
background:url(img/immagine_unica.gif) 0 -190px; width:200px;
height:50px;
display:block;
}

Per lo stato :hover:

a#pulsante{
background:url(img/immagine_unica.gif) 201px -190px; }

Ecco il risultato (provate a posizionarvi con il mouse sopra il pulsante):

Terzo step: iconografia per i link
Per concludere diamo una formattazione ai collegamenti ipertestuali a documenti pdf, rss e esterni (ad altri siti). Li differenziamo utilizzando un’iconografia diversa per ogni link.
Ecco la parte di codice relativa:

(X)html:

<a id="esterno" href="#">Collegamento a sito esterno</a>
<a id="pdf" href="#">Collegamento a pdf</a>
<a id="rss" href="#">Collegamento a feed rss</a>

CSS:

a#esterno{
background:url(img/immagine_unica.gif) -372px -2px no-repeat;
padding-left:18px;
}
a#pdf{
background:url(img/immagine_unica.gif) -372px -21px no-repeat; padding-left:18px;
}
a#rss{
background:url(img/immagine_unica.gif)
-372px -40px no-repeat; padding-left:20px;
}

Ecco il risultato:

Collegamento a sito esterno

Collegamento a pdf

Collegamento a feed rss

torna su

[ Torna all’inizio della pagina ]



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Dichiarazione di accessibilità

[ Torna all’inizio della pagina ]