Ci capita spesso di scrivere CSS, e sempre più spesso ci capita di associare ad una classe un’immagine di background che sostituisce il list-style-type degli elenchi in <ul>.
Tanto più il web è richiesto in modalità user frindly, tanto maggiore sarà la necessità di associare immagini rilevanti a voci di menu / elenchi. Ad una lista omogenea vengono spesso associate immagini diverse che riescono ad identificare ancor prima del testo, il tipo di navigazione che l’utente può scegliere.
Un problema si riscontra se l’elenco di funzionalità è particolarmente lungo: ogni voce in elenco costringe al loading di un file diverso e ad una chiamata http indipendente che va ad aggiungersi alle altre, appesentendo non di poco la navigazione.
Un esempio è una sezione di foglio di stile del genere:
.listuno{
background:url(img/1.png) no-repeat left;
padding-left:15px;
}
.listdue{
background:url(img/2.png) no-repeat left;
padding-left:15px;
}
.listtre{
background:url(img/3.png) no-repeat left;
padding-left:15px;
}
.listquattro{
background:url(img/4.png) no-repeat left;
padding-left:15px;
}
Invece si potrebbe usare una sola grande immagine, contenente a distanza prefissata, tutte le immagini da visualizzare. Questa verrà caricata interamente, ma nell’elemento richiamato via foglio di stile, sarà possibile visualizzare solo la parte di immagine che ci interessa, sfruttando la proprietà background-position.
.listuno{
background:url(img/1.png) no-repeat left;
background-position:0 -100px
padding-left:15px;
}
.listdue{
background:url(img/1.png) no-repeat left;
background-position:0 -75px;
padding-left:15px;
}
.listtre{
background:url(img/1.png) no-repeat left;
background-position:0 -50px;
padding-left:15px;
}
.listquattro{
background:url(img/1.png) no-repeat left;
background-position:0 -25px;
padding-left:15px;
}
Consiste in questo quello che si definisce il CSS Sprites. Ma quando conviene implementarlo? Non sempre. Se nella singola pagina non si prevede il loading di almeno più del 50% delle immagini che si andrebbero a sprittare, con ogni probabilità risulta più conveniente caricare i singoli file. Anche se a prescindere da questo, non appena si oltrepassano le 15 immagini, forse sarebbe meglio introdurre la tecnica.
In realtà, come sempre, non esiste un ottimo assoluto. La cosa migliore è quella di provare su strada le due alternative, magari direttamente su un server remoto, visto che in locale, tutto apparirà perfettamente efficente all’occhio umano. Mentre le reali prestazioni del web, dipenderanno in maniera non indifferente dal server remoto. Ed ognuno di questi può reagire meglio o peggio a certe cose.
Tale tecnica è utilizzata, fra gli altri, da Yahoo per il menu laterale sinistro e da PagineGialle per l’immagine di listing dei risultati.