Tutoriel CSS - sommaire

Créer et utiliser un "sprite CSS"

Un "sprite CSS" (ou "sprite sheet") est un fichier unique comprenant plusieurs images positionnées les unes à côté des autres.
Des sites à fort trafic (Youtube, Google, Facebook, Amazon, ...) exploitent cette technique sur des pages que vous consultez tous les jours ...
Pour afficher l’une des images du "sprite CSS" il suffit d’utiliser HTML & CSS et en particulier la propriété background-position.

Intérêt de cette technologie

Mais quel peut-être l'intérêt des grilles d'images ?
Le procédé réduit considérablement le nombre de requête HTPP.
Les feuilles de sprites sont utilisées dans de nombreuses applications web où de multiples images sont utilisées. Au lieu d'avoir une image par fichier, on économise de la bande passante et de la mémoire en les envoyant toutes dans le même fichier, ainsi, le nombre de requêtes HTTP diminue sensiblement.

Création d'une grille d'images

Il existe de nombreuses applications en ligne mais je préfère utiliser Inkscape.

Utilisez une application en ligne

Sachez qu'il existe des générateurs de sprites CSS.
Le problème de ces applications en ligne c'est que les images n'ont pas forcément toutes les mêmes dimensions et le positionnement n'est pas très satisfaisant.
L'utilisation de ces générateurs est d'une simplicité enfantine. Le fichier est créé et retourné sous forme d'un PNG.
Ci-dessous un fichier "spritesheet" généré par l'application en ligne : csssprites.com

Comme vous pouvez le constater les six images sont disposées un peu n'importe comment et n'ont pas la même taille.
L'interface propose cependant le code CSS c'est à dire une classe par image incorporée :

Pour chaque image contenue de la grille il y a une classe.
Vous comprendrez ce code en lisant la deuxième partie de ce chapitre (manipuler un "sprite CSS").

Utiliser Inkscape

Cependant pour manipuler facilement en HTML & CSS chaque image d'un sprite CSS, il est préférable que toutes les images aient la même taille et soient positionnées à la "queue leu leu" OU dans un tableau (N lignes et N colonnes).

Comme vous savez, l'on peut importer des images matricielles dans un document Inkscape et on peut les redimensionner afin qu'elles aient toutes les mêmes dimensions (grâce à la grille).
J'ai donc créé un document Inkscape qui fait 800 pixels par 200 et j'ai inséré dans ce fichier 4 logos (4 images matricelles).
Le sprite CSS produit avec Inkscape :

Chaque image fait 200 par 200 pixels
Ce fichier se nomme "logos.svg" ; il comprend les logos de quatre langages du web : HTML5, CSS3, JavaScript et SVG.
Notez bien l'ordre des images : html5, css3, JS et SVG.

Manipuler le 'sprite CSS'

Vous savez maintenant créer ce type de fichier. Maintenant il faut pouvoir afficher dans une page certaines de ces images.
Seuls les langages HTML & CSS suffisent, pas de JavaScript !

Le code CSS

Chaque image sélectionnée sera affichée dans une boite de 200 par 200 pixels.
Les DIV seront disposés côte à côte (display : inline-block).
Chaque boite aura pour "background" le fichier "logos.svg" qui fait 800 par 800 ...
Donc si on en reste là chaque boite affichera le quart supérieur gauche de "logos.svg" c'est à dire le logo de HTML5.

Aussi il faut rajouter une classe par image constitutive du "spritesheet". Ici il faut 4 classes.
Chaque classe précise à partir de où extraire dans la grille d'images une zone de 200 par 200.

Observez bien le signe "-" devant l'abscisse à partir de la deuxième classe.
En effet pour classe "css", je demande que l'image commence à 200 pixels de son bord gauche, 400px pour la classe 'js', 600px pour la classe 'svg'.

Le code HTML

Le rendu avec le navigateur

Le logo du langage SVG.

Le logo de CSS3.

Le logo de HTML5.

Le logo de JavaScript.

Plus difficile

Le fichier "spritesheet" comprend 4 images réparties dans une grille de deux lignes et deux colonnes et s'intitule "drapeaux.svg" :

Le document fait 800 par 600 pixels ; chaque image fait 400 par 300.
Le "spritesheet" comprend 4 drapeaux : GB, FR,IT,PB.
Comment récupérer l'une des images du "spritesheet" compte tenu de cette disposition en tableau ?

La page exploitant ce sprite CSS

Le code CSS de la page

Chaque DIV sera centré horizontalement dans la page.

Notez que pour les deux dernières classes les ordonnées sont des valeurs négatives car l'image commence à 300px du bord supérieur.

Le code HTML de la page

Le code HTML ne présente aucune difficulté.

Des liens à partir d'une grille d'images

On peut, à partir d'une grille d'images extraire des images servant de liens hypertextes.
Le sprite CSS ci-dessous fait 100 par 100 ; chaque image fait 50 par 50.

La page contenant les liens sous forme d'images extraites de la grille

Le code CSS de la page

J'utilise le raccourci background qui remplace background-image, background-position.
Notez que j'utilise ici quatre ID (et non pas des classes).

Le code HTML de la page

Les balises A n'ont pas de contenu mais ont trois attributs : href, id, title.
Ici la valeur de l'attribut href vaut # : le clic sur la balise A n'a aucun effet !