Toujours en quête de meilleures performances, je m’attarde et j’extrapole (un peu) sur les sprites CSS.
Sprites
Je l’avoue, bien que connaissant la technique, je n’y trouvais jusqu’alors pas une grande utilité (outre pour les changements d’états au survol).
Maintenant qu’il est question de performances, la réponse est toute autre et j’utilise bien plus souvent cette astuce. C’est un peu contraignant de produire des images démesurément grandes et de tout bien caler, mais on s’en sort quand même sans trop de heurts.
Je tâche toutefois de bien espacer mes sprites, pour permettre un agrandissement du texte dans le navigateur sans effet de bord sur l’affichage.
Clipping
De la même manière que je le fais maintenant pour mes images décoratives, je m’interrogeais sur la pertinence d’avoir une multitude d’images appelées dans le HTML. Pourquoi ne pas réduire de la même manière le nombre de requêtes ?
Je passe en revue plusieures solutions.
Techniques de masquages par CSS
<div style="width:100px;height:50px;backgroud-image:url(texte.png);">
<span class="masquer">Texte</span>
</div>
Il s’agit là d’une technique plutôt connue mais qui pose je crois, pas mal de problèmes d’accessibilité. On s’empêche tout simplement d’utiliser des images de contenu et on ruse par CSS pour garantir un affichage conforme à grand coup d’images de fond.
Bref, on détourne le problème et on s’en crée des nouveaux… pas convaincu.
Images map
<img src="menu.png" alt="Menu" title="" width="150" height="50" usemap="#menu" />
<map id="menu" name="menu">
<area alt="Lien 1" href="#lien_1" coords="0, 0, 75, 50" shape="rect"/>
<area alt="Lien 2" href="#lien_2" coords="75, 0, 150, 50" shape="rect"/>
</map>
C’est déjà plus accessible. Mais on perd par contre toute information sémantique autour de nos liens et c’est un peu casse-pied à mettre en place. Pourquoi pas dans certaines occasions (typiquement une carte géographique).
Clipping
Je me souviens alors d’un vieil article de Laurent Denis sur le clipping et après avoir farfouillé un peu, on obtient quelque chose qui tient à peu prêt la route.
Qu’en pensez-vous ? Ça vaut le coup de se donner du mal comme ça pour les performances ?
Les inconvénients que j’y vois au premier abord sont :
- le poids ajouté au fichier CSS (augmenté encore un peu plus pour notre ami IE) ;
- l’accessibilité ;
- la complexité relative de la technique ;
- et surtout l’affichage un peu étrange de la page CSS désactivées et images activées.
Les avantages :
- le nombre de requêtes HTTP réduit ;
l’accessibilité(merci Stéphane hein !) ;- la sémantique du code ;
- et la possibilité de faire un changement d’image au survol sans ajout de JS.