103
Mise en forme des liens
L’image.disparaît.aussi.un.instant.pendant.son.chargement,.mais.cette.fois,.c’est.la.même.
image.qui.apparaît.en.dessous,.ce.qui.permet.de.masquer.l’effet.de.clignotement..
L’autre. astuce. pour. supprimer. le. clignotement. consiste. à. inclure. la. ligne. de. code. suivante. dans. le. fichier. CSS. spécifique. d’Internet. Explorer,. qui. active. la. mise. en. cache. de.
l’arrière-plan.
html {
filter: expression(document.execCommand("BackgroundImageCache", false, true));
}
Sprites CSS
Les.requêtes.multiples.au.serveur.peuvent.avoir.un.effet.désastreux.sur.les.performances.
des.sites..La.méthode.Pixy.vise.donc.à.réduire.le.nombre.de.requêtes.en.incluant.tous.les.
états.du.bouton.dans.une.unique.image..Mais.pourquoi.s’arrêter.en.si.bon.chemin ?.Vous.
pouvez.réduire.le.nombre.d’appels.au.serveur.à.deux.ou.trois..C’est.exactement.ce.que.font.
les.sprites.CSS –.une.unique.image.contenant.une.multitude.d’icônes,.de.boutons.et.d’autres.
images..De.nombreux.sites.web.importants.utilisent.cette.technique,.dont.la.page.d’accueil.
de.Yahoo!,.ou.bien.encore.notre.site.Clearleft,.pour.sa.barre.de.navigation.(voir.Figure 5.12).
#nav li a {
display: block;
text-indent: -9999px;
height: 119px;
width: 100px;
background-image: url(‘/img/nav.png’);
background-repeat: no-repeat;
}
#nav li.home a,
#nav li.home a:link,
#nav li.home a:visited {
background-position: 0 0;
}
#nav li.home a:hover,
#nav li.home a:focus,
#nav li.home a:active {
background-position: 0 -119px;
}
#nav li.who-we-are a,
#nav li.who-we-are a:link,
#nav li.who-we-are a:visited {
background-position: -100px 0;
}
#nav li.who-we-are a:hover,
#nav li.who-we-are a:focus,
#nav li.who-we-are a:active {
background-position: -100px -119px;
}