Pré-requis pour ce tutoriel

  • Un navigateur web (Mozilla Firefox, Google Chrome, Safari aux choix)
  • Un outil de développement (Coda, Dreamweaver, Aptana, Notepad++, etc.)
  • Des bases dans le développement HTML et CSS

L’origine du mal

Tout d’abord tâchons de comprendre la raison d’un tel « clignotement ». Et pour comprendre, rien de mieux qu’un exemple, prenons le code ci-dessous, voici le CSS :

a {
    background: url('imgs/tuto-sprite-normal.png') no-repeat -5px -5px;
    display: block;
    width: 210px;
    height: 70px;
}
a:hover {
    background: url('imgs/tuto-sprite-hover.png') no-repeat -5px -5px;
}

Faut-il vraiment que je vous donne le HTML ? Bon allez jsuis sympa :

<a href="#">Mon lien</a>

Et une petite démo pour constater par vous même l’effet. Si vous ne voyez rien, réessayer plusieurs fois, en prenant soin de vider le cacher de votre navigateur à chaque fois (Ctrl+F5 avec Firefox sous Windows et Maj+Cmd+R avec Firefox sous Mac OS). Cliquez-ici pour accéder à la démo de rendu sans « Sprite CSS ».

Afin de bien comprendre la raison de ce tel effet je m’en remet à l’inspecteur web de Safari. Et voici ce que nous obtenons:

tuto-sprite-illustration-1

Lorsque vous chargez une page internet, avant que celle-ci ne s’affiche complètement il lui faut un certain temps, le temps de charger le texte, les images, les fichiers JS, CSS, etc. Sur l’image ci-dessus vous pouvez voir le moment auquel chaque élément est chargé ainsi que la durée de ce chargement. Et bien si vous regardez en détail, vous vous apercevrez que l’image définie en background sur le « hover » de mon lien, a été chargé au moment où l’on a survolé le lien, c’est-à-dire au moment où le CSS a réclamé l’image au navigateur. C’est justement cette nouvelle requête faite au serveur qui va générer cette « latence » au moment du survol du lien avant que l’image apparaisse. Bon maintenant que nous avons compris quelle en était l’origine, attaquons le mal à la racine !

Les Sprites ça désaltère et c’est déjà pas mal…

Si vous avez suivi les explications précédentes vous serez d’accord avec moi pour dire que la solution à ce problème serait de tout charger dès le début, n’est-ce pas? Bon on est d’accord sur ce point déjà, maintenant il nous faut trouver la bonne technique. Pendant longtemps « Zeuh solution » consistait à utiliser un JS de préchargement qui gérait le chargement de toutes les images. Halte-là! Il existe une solution beaucoup plus propre et radicalement plus simple! Il suffit de mettre toutes nos images sur une seule et même image! Et oui, c’est ça le secret des « Sprites CSS ».
Maintenant que nous connaissons la théorie, passage à la pratique. Parce que normalement vous devriez être en train de vous posez une question là (mais si c’est pas le cas c’est pas grave, vous avez quand même le droit de lire la suite ;) ) : « Comment changer l’image de fond quand on survole le lien, si toutes mes images se trouvent sur la même image ? Argh xD « . L’astuce réside dans l’utilisation de la position du background avec l’attribut CSS « background-position« .
Cet attribut CSS permet en effet de modifier l’emplacement de l’origine de l’image par rapport aux coordonnées de la zone affichant l’image. « HEIN ? ». Bon ok je vais illustrer tout ça. La première image illustre la situation initiale :

tuto-sprite-illustration-2-1

Cette deuxième image illustre la situation lorsque l’utilisateur survole le lien :

tuto-sprite-illustration-2-2

Pour ceux qui n’auraient pas saisi on va supposer que notre image de fond fait 100px de hauteur, 50px étant consacré à chaque fond différent. Lorsque l’on fixe la hauteur de notre lien à 50px de hauteur, le reste n’est pas affiché. Ainsi en plaçant le background avec un offset négatif de 50px, la deuxième image sera affichée et la première sera cachée. Voici le CSS qui permet d’obtenir ce résultat :

a {
    background: url('imgs/tuto-sprite-final.png') no-repeat -5px -5px;
    display: block;
    width: 210px;
    height: 70px;
}
a:hover {
    background-position: -5px -85px;
}

Je vous renvoie à nouveau vers la page d’exemple pour cette fois-ci consulter le deuxième exemple qui utilise les sprites.

Pour conclure…

L’autre avantage de cette technique, qui ne fait pas qu’éviter la frustration rétinienne de vos visiteurs, c’est la mise en cache des vos images dans leur totalité, de cette manière vous pouvez être sûr que toutes vos images seront à jour en même temps.
Pour votre culture voici quelques exemples qui ne manqueront pas d’éveiller votre sens de l’astuce et de la bidouille en sprites :

  • Le background du site Mashable (peut être un peu too much, mais on se rend compte de la puissance des sprites),
  • Le bouton d’achat d’Expandrive,
  • Etc. vous en trouverez bien d’autres qui utilisent cette technique (mais pas encore assez à mon goût).