Bien utiliser les sprites CSS

Introduction du cours

Les sprites CSS sont une façon de se servir d'une seule et même image qui en « contient » plusieurs, en n'affichant que ce qui nous intéresse. Les avantages de cette technique sont multiples, comme nous allons le voir.

Prérequis : connaître les bases du CSS et du HTML. Je vous renvoie donc vers le tutoriel html / css du site.

Explications

Les sprites, c'est quoi ?

C'est une technique qui consiste à regrouper plusieurs images en une seule et à ne sélectionner que la zone que l'on veut afficher. Cette technique a été très utilisée dans les jeux vidéos à l'époque des jeux 2D, par exemple ceux où vous cassiez des briques avec un plombier bedonnant en salopette ou un hérisson avec des tennis rouges... En fait, chaque personnage ou objet avait sur une même image toutes les positions nécessaires à son animation, et une seule petite zone était affichée, dans laquelle « défilait » le reste des images selon les actions du joueur. Eh bien en webdesign, c'est un peu pareil, et c'est ce que nous allons voir maintenant.

Cela va probablement chambouler un peu vos habitudes de découpage d'un design, et vous amener à réfléchir au meilleur moyen de les préparer.
Concrètement, par exemple pour avoir un ensemble d'icônes faites avec des images qui changent au survol de la souris, vous auriez fait autant d'images que de possibilités :

Pour la suite du tutoriel, on va les fusionner comme ceci et utiliser cette image :

Mais quel intérêt y a-t-il ? C'est moins pratique en CSS ! Et puis charger une grosse image, ça prend plus de temps qu'une petite, non ?

Songez à ceci : la grande image fait 68 ko, chaque petite fait 12 ko. Donc, d'un côté on chargera une fois 68ko, et de l'autre on chargera douze fois 12 ko, soient... 144 ko. Mais ce n'est pas tout : à chaque fois que vous allez devoir charger une image, le serveur doit effectuer une requête HTTP pour récupérer l'image et l'afficher, soit un aller-retour.
En n'ayant qu'une seule image, vous économisez de nombreux allers-retours. Certes cela paraît minime, mais imaginez que vous ayez des centaines de milliers de visiteurs uniques par jour ! o_O

De plus, dans le cas d'un élément qui change d'image au survol, vous êtes certain qu'il n'y aura pas de latence au moment du survol : le site n'aura pas à aller demander l'image et à la charger, puisqu'elle a déjà été chargée et mise en cache.

Une première approche : le principe

Maintenant que nos images sont prêtes, il va falloir choisir en CSS ce que l'on veut afficher.

Pour cela, il faut d'abord que l'image soit définie comme background dans un objet ayant une certaine taille.

En fonction de ce que l'on veut et de la façon dont on a organisé notre image, une seule taille (largeur ou hauteur) peut être définie, par exemple pour faire un repeat-x ou repeat-y.

Pour l'instant, prenons un cas simple où l’on veut afficher des icônes les unes à la suite des autres, toutes de largeur et hauteur fixes et définies.

Voici notre code HTML :

<ul class="icone"> <li class="icone-1"></li> <li class="icone-2"></li> <li class="icone-3"></li> <li class="icone-4"></li> <li class="icone-5"></li> <li class="icone-6"></li> </ul>

Chaque point de la liste sera donc une icône. Vous n'êtes évidemment pas obligé d'utiliser des listes.

Comme elles sont toutes de même taille, on applique une classe « icone », la même pour toutes afin de ne pas répéter les mêmes éléments à chaque fois, et ne pas avoir à toutes les modifier en cas de changement :

/* Cibler les éléments <li> appartenant à un élément de classe "icone" */ .icone li { width: 60px; height: 60px; display: inline-block; background: url("sprite.png") no-repeat; }

Qu'avons-nous fait pour l'instant ? Nous avons simplement dit que chaque point de la liste sera un bloc en ligne de 60 pixels de hauteur et de largeur, et qu'il aura une image de fond. Pour éviter tout problème, on peut lui appliquer la propriété no-repeat.

Maintenant, c'est là que les choses se corsent (mais pas beaucoup, promis :p ). On va appliquer des classes avec un background de notre image, en leur indiquant la position, au moyen de... ? De ?

background-position

Voyons ce que ça donne dans la pratique, pour l'icône de droite seulement :

.icone .icone-1 { background-position: left top; }

Voici le résultat :

Qu'est-ce qui s'est passé précisément ? Il n'y a rien de particulier...

Revoyons un peu le code. On a gardé la même image de background qu'initialement, et on lui a simplement donné une position. L'image est affichée à partir de son bord gauche et de son bord haut (left top). Comme on a dit que la liste avait une largeur et une hauteur de 60 pixels, le reste de l'image au-delà de ces 60x60 n'est pas affiché, on a donc exactement ce qu'on voulait. Sauf qu'on ne s'en rend pas bien compte car on n'a qu'une image pour l'instant, mais nous allons arranger ça très vite.

La position de base est toujours le coin en haut à gauche. Vous pouvez essayer de mettre 0 0 à la place de left top, vous verrez que vous obtiendrez le même résultat.

Maintenant, on va passer à la partie intéressante...

La méthode en action

Bien bien bien.

On voulait peindre le plafond, je vous ai donné l'échelle, je vous ai placé dessus, je vous ai donné la peinture. Maintenant, accrochez-vous bien au pinceau : j'enlève l'échelle !

.icone li { width: 60px; height: 60px; display: inline-block; background: url("sprite.png") no-repeat; } .icone .icone-1 { background-position: left top; } .icone .icone-2 { background-position: 20% top; } .icone .icone-3 { background-position: 40% top; } .icone .icone-4 { background-position: 60% top; } .icone .icone-5 { background-position: 80% top; } .icone .icone-6 { background-position: right top; }

Allez, vous allez voir que c'est tout simple. Vous avez même peut-être déjà compris ! Revoyons l'action ralentie au magnétoscope :

.icone .icone-2 { background-position: 20% top; }

On a donc déplacé notre image de 20 % vers la droite, comme dans l'image suivante. Comme l'image est régulière et le nombre d'icônes de 6, faire le déplacement en pourcentage est aisé : il y a en tout cinq déplacements à faire, d'un seul bloc à chaque fois. 1/5 = 20 %. ^^

Explication

Ainsi, au fur et à mesure, on peut placer notre image où on le souhaite, et comme on a toujours la taille de 60px*60px à partir du point défini, on a l'illusion qu'il n'y a qu'une seule image.

Voir le résultat

Notez bien : j'ai utilisé les valeurs left et right au début et à la fin car c'est plus simple que des valeurs en pourcentage, mais 0 % et 100 % auraient aussi bien fonctionné. En fonction des images utilisées, ce n'est pas toujours possible. Ici, notre image est « régulière », ce qui permet ce genre de facilités.

Mais il existe également une autre façon de faire : utiliser des valeurs en pixels. Nous allons voir comment.

.icone .icone-1 { background-position: left top; } .icone .icone-2 { background-position: -60px top; } .icone .icone-3 { background-position: -120px top; } .icone .icone-4 { background-position: -180px top; } .icone .icone-5 { background-position: -240px top; } .icone .icone-6 { background-position: right top; }

Comme vous le voyez, les valeurs en pixels sont négatives. Si vous vous trompez et que vous mettez une valeur positive, le déplacement se fera dans le mauvais sens, et le résultat le plus probable, c'est que vous ne verrez tout simplement pas l'image.

Faites bien attention, là encore j'aurais pu utiliser 0px en lieu et place de left et -300px au lieu de right. ;)

Alors, quelle est la différence entre l'utilisation des % et des pixels ?

Il n'y a pas vraiment de différence, mais des avantages et des inconvénients inhérents à chaque méthode. Voyons deux cas :

• vous souhaitez ajouter une icône supplémentaire ;

• vous souhaitez changer la taille des icônes.

Dans le premier point, si vous avez utilisé les valeurs en pixels, vous n'aurez qu'à ajouter cette image à la suite en rajoutant une classe « icone-7 » avec un décalage de 60px de plus que la précédente. Si vous utilisiez les %, il va vous falloir tout réajuster.

Dans le second point, si vous avez utilisé les valeurs en pourcentage, vous n'aurez qu'à changer la taille dans la classe « icone », et ne plus toucher à rien. En revanche, si vous utilisiez des valeurs en pixels, il va vous falloir tout recalculer pour l'ensemble de vos classes « icone-X ».

De plus, dans le cas où nous aurions plusieurs images fusionnées de différentes tailles, il pourrait arriver que le pourcentage ne soit pas assez précis.

Dans certains cas, suivant le CSS que vous avez écrit avant, il se peut que les background-position ne s'appliquent pas. Vous pouvez résoudre facilement le problème en ajoutant la classe .icone devant chaque classe .icone-1, .icone-2, .icone-3...

Voyons où nous en sommes :

Voilà, maintenant que vous avez digéré ça, faites quelques essais. On va passer au morceau final, somme toute assez simple une fois ceci compris.

Un peu d'animation : le survol

Vous l'attendiez tous, hein ? :p

En fait, la gestion du survol de la souris va être toute simple à partir de ce qu'on a déjà fait.
Comme un code vaut mieux qu'un long discours, voici : :-°

.icone li { width: 60px; height: 60px; display: inline-block; background-image: url("sprite.png"); background-repeat: no-repeat; } .icone .icone-1 { background-position: left top; } .icone .icone-2 { background-position: 20% top; } .icone .icone-3 { background-position: 40% top; } .icone .icone-4 { background-position: 60% top; } .icone .icone-5 { background-position: 80% top; } .icone .icone-6 { background-position: right top; } .icone .icone-1:hover { background-position: left bottom; } .icone .icone-2:hover { background-position: 20% bottom; } .icone .icone-3:hover { background-position: 40% bottom; } .icone .icone-4:hover { background-position: 60% bottom; } .icone .icone-5:hover { background-position: 80% bottom; } .icone .icone-6:hover { background-position: right bottom; }

Ouh, c'était compliqué hein ? :-°

Alors qu'avons-nous fait ?
Grâce à la pseudo-classe :hover, on peut agir sur l'action du survol de la souris sur l'élément. On a donc tout simplement remplacé top par bottom pour afficher le bas de chaque position d'icône. Ainsi, on a donc tout un menu en icônes, dynamique, avec une seule image. Il suffirait d'y rajouter des liens, je vous laisse le soin de faire ce que vous voulez. ;)

Voir le résultat

Simple, non ? :p

Cas particulier : les images répétées

Les sprites ont tout de même leurs limites. En effet, il arrivera dans vos designs que vous devrez répéter une image. Or, si vous choisissez d'affecter un background sur toute une surface, toute l'image va apparaître.

Il va donc vous falloir faire attention, et penser à regrouper vos images à répéter suivant leur sens.
Pour répéter vos images horizontalement avec un repeat-x, vous devez placer vos images verticalement et jouer sur le placement en hauteur :

À l'inverse, pour répéter vos images verticalement avec un repeat-y, vous devrez concevoir vos sprites horizontalement :

Voilà pourquoi il est important de bien réfléchir à l'organisation de vos sprites. ;)

À noter que Google utilisait (dans le temps) une autre technique : ils mettent le fond de leur bouton au bas de leur image en prenant toute la largeur, afin de pouvoir répéter l'image sur l'axe x.

Petits exemples

Je vous laisse jeter un oeil aux sprites de Yahoo, Google, Facebook, Amazon... ;)

Les sprites sous un lien textuel

J'ai eu quelques demandes et questions concernant les possibilités d'utilisation des sprites. Des questions qui peuvent paraître simples à certains, mais que je vais quand même aborder ici pour que tout le monde trouve son bonheur. ;)

• Comment puis-je utiliser la méthode des sprites avec des liens, pour faire un menu ?

• Comment puis-je afficher du texte par-dessus mes images ?

Cet exemple ne concerne que des liens ayant un contenu textuel écrit dans le HTML, sous lequel on souhaiterait mettre une image de fond changeant au survol. Pour des images cliquables, voir la partie suivante du tutoriel.

Le principe des sprites peut être appliqué sur n'importe quel élément. Si vous souhaitez faire des liens cliquables dont le fond change au survol, comme sur le Site du Zéro, il faut appliquer nos classes à la balise du lien, comme suit :

<ul> <li><a href="lien" class="bouton-menu">Ma Page 1</a></li> <li><a href="lien" class="bouton-menu">Ma Page 2</a></li> <li><a href="lien" class="bouton-menu">Ma Page 3</a></li> </ul>

Ou bien même tout simplement :

<ul class="menu"> <li><a href="lien">Ma Page 1</a></li> <li><a href="lien">Ma Page 2</a></li> <li><a href="lien">Ma Page 3</a></li> </ul>