Image, Proprieté, Sprites

CSS Sprites ? Qu’est ce que ça signifie ?

L’idée est simple : fusionner plusieurs images en une seule et utiliser la propriété background-position pour n’afficher qu’une seule partie.

L’intérêt principal :

• Limiter le nombre de requêtes serveur.

Un petit exemple :

Partons de 3 icônes suivantes :

Commencez par utiliser votre éditeur d’images préférés pour en créer qu’une seule :

Ici, horizontalement j’ai placé les 3 icônes précédentes et en dessous ces mêmes icônes dans un état différent (afin de réaliser un effet lors du survol).

Concretement, pour afficher l’icône delicious, il faut jouer de la règle et « déplacer » la zone d’affichage :

Ce qui donne en programmation :

<a id="sprite_twitter" class="sprites"><span>Twitter</span></a>
<a id="sprite_delicious" class="sprites"><span>Delicious</span></a>
<a id="sprite_yahoo" class="sprites"><span>Yahoo Buzz</span></a>

et en css :

.sprites {
background-color:transparent;
background-image:url(/your/image/url.png);
background-repeat:no-repeat;
display:block;
height:59px;
width:169px;
}

.sprites span { display:none; }

.sprites #sprite_twitter { background-position:0px -59px; }
.sprites #sprite_twitter:hover { background-position:-0px 0px; }

.sprites #sprite_delicious { background-position:-169px -59px; }
.sprites #sprite_delicious:hover { background-position:-169px 0px; }

.sprites #sprite_yahoo { background-position:-338px -59px; }
.sprites #sprite_yahoo:hover { background-position:-338px 0px; }

Pour finir, voici trois générateurs de CSS sprites en ligne :

• csssprites.com
• fr.spritegen.website-performance.org
• css-sprit.es