Lamiae
Extrait du cours bien utiliser les sprites CSS
……..
Mais pourquoi ? Comme on le stylise en CSS, on peut quand même le voir et cliquer dessus, non ?
Certes, mais songez que certains internautes sont contraints de naviguer avec l’affichage des CSS désactivé, ou des lecteurs d’écrans. C’est le cas des personnes malvoyantes. Pour eux, le résultat sera sans appel : un lien vide qui n’affiche rien, et qui n’est donc pas cliquable. En conséquence, il devient impossible de naviguer sur votre site. C’est pour cela qu’il faut utiliser une image dans le HTML.
Mais le problème sera le même avec une image dans le HTML : si un utilisateur est malvoyant, il ne la verra pas !
Et c’est là le rôle de l’attribut alt, qui est obligatoire dans la balise <img />. En effet, dans le cas où une image ne serait pas chargée pour une raison ou une autre (erreur de connexion, lecteur d’écran…), c’est la description contenue dans l’attribut alt qui sera affiché ! Ainsi, le lien reste toujours cliquable. Pensez donc toujours à remplir cette balise consciencieusement.
Maintenant, un cas pratique, et une solution !
Nous allons reprendre notre image du début :
Ainsi que notre code du début :
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>
Code : CSS
.icone li
{
width: 60px;
height: 60px;
display: inline-block;
background: url(« sprite.png ») no-repeat;
}
……
Sommaire: Bien utiliser les sprites CSS
Bien utiliser les sprites CSS
Explications
Une première approche : le principe
La méthode en action
Un peu d’animation : le survol
Cas particulier : les images répétées
Les sprites sous un lien textuel
Cas des images cliquables
Maintenant, un cas pratique, et une solution !
Variantes
Partager
Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)Bien utiliser les sprites CSS (488 KO) (Cours PDF)
