93
Mise en forme des liens
viennent.donc.redéfinir.les.styles.:hover.et.:active..Pour.éviter.cela,.il.est.judicieux.d’appliquer.les.styles.de.liens.dans.l’ordre.suivant :.
a:link, a:visited, a:hover, a:focus, a:active
En.anglais,.une.petite.formule.a.été.retenue.pour.se.remémorer.cet.ordre :."Lord.Vader.Hates.
Furry.Animals".(Darth.Vader.n’aime.pas.les.bêtes.à.poil)..Si.vous.n’aimez.pas.l’anglais,.
creusez-vous.la.tête.et.trouvez.une.formule.pour.L-V-H-F-A !.
Soulignements amusants
Du.point.de.vue.de.l’utilisabilité.et.de.l’accessibilité,.il.est.important.que.vos.liens.puissent.
se.signaler.par.d’autres.moyens.que.leur.seule.couleur..Trop.de.malvoyants.ont.du.mal.à.
faire.la.distinction.entre.les.couleurs.de.faible.contraste,.notamment.sur.le.texte.de.petite.
taille..Par.exemple,.ceux.qui.ne.distinguent.pas.les.couleurs.ne.peuvent.pas.différencier.certaines.combinaisons.de.couleurs.dont.les.niveaux.de.luminosité.ou.de.saturation.sont.trop.
proches..C’est.pour.cette.raison.que.les.liens.sont.soulignés.par.défaut.
Embellissement simple des liens
Les.concepteurs.n’aiment.généralement.pas.les.liens.soulignés,.qui.alourdissent.la.page.et.
l’encombrent..Si.vous.décidez.de.supprimer.les.soulignements,.vous.pouvez.passer.les.liens.
en.gras..La.page.a.l’air.moins.chargée,.mais.les.liens.sont.clairement.visibles :
a:link, a:visited {
text-decoration: none;
font-weight: bold;
}
Vous. pouvez. ensuite. réappliquer. les. soulignements. en. cas. de. survol. ou. de. sélection. des.
liens,.afin.de.renforcer.leur.caractère.interactif :
a:hover, a:focus, a:active {
text-decoration: underline;
font-weight: bold;
}
Il.est.aussi.possible.de.créer.un.soulignement.discret.avec.des.bordures..Dans.cet.exemple,.
le.soulignement.par.défaut.est.remplacé.par.une.ligne.en.pointillé.moins.imposante..Lorsque.
l’utilisateur.survole.le.lien.ou.clique.dessus,.la.ligne.devient.continue.afin.d’indiquer.visuellement.que.quelque.chose.vient.de.se.passer :.
a:link, a:visited {
text-decoration: none;
border-bottom: 1px dotted #000;
}
a:hover, a:focus, a:active {
border-bottom-style: solid;
}
Mise en forme des liens
viennent.donc.redéfinir.les.styles.:hover.et.:active..Pour.éviter.cela,.il.est.judicieux.d’appliquer.les.styles.de.liens.dans.l’ordre.suivant :.
a:link, a:visited, a:hover, a:focus, a:active
En.anglais,.une.petite.formule.a.été.retenue.pour.se.remémorer.cet.ordre :."Lord.Vader.Hates.
Furry.Animals".(Darth.Vader.n’aime.pas.les.bêtes.à.poil)..Si.vous.n’aimez.pas.l’anglais,.
creusez-vous.la.tête.et.trouvez.une.formule.pour.L-V-H-F-A !.
Soulignements amusants
Du.point.de.vue.de.l’utilisabilité.et.de.l’accessibilité,.il.est.important.que.vos.liens.puissent.
se.signaler.par.d’autres.moyens.que.leur.seule.couleur..Trop.de.malvoyants.ont.du.mal.à.
faire.la.distinction.entre.les.couleurs.de.faible.contraste,.notamment.sur.le.texte.de.petite.
taille..Par.exemple,.ceux.qui.ne.distinguent.pas.les.couleurs.ne.peuvent.pas.différencier.certaines.combinaisons.de.couleurs.dont.les.niveaux.de.luminosité.ou.de.saturation.sont.trop.
proches..C’est.pour.cette.raison.que.les.liens.sont.soulignés.par.défaut.
Embellissement simple des liens
Les.concepteurs.n’aiment.généralement.pas.les.liens.soulignés,.qui.alourdissent.la.page.et.
l’encombrent..Si.vous.décidez.de.supprimer.les.soulignements,.vous.pouvez.passer.les.liens.
en.gras..La.page.a.l’air.moins.chargée,.mais.les.liens.sont.clairement.visibles :
a:link, a:visited {
text-decoration: none;
font-weight: bold;
}
Vous. pouvez. ensuite. réappliquer. les. soulignements. en. cas. de. survol. ou. de. sélection. des.
liens,.afin.de.renforcer.leur.caractère.interactif :
a:hover, a:focus, a:active {
text-decoration: underline;
font-weight: bold;
}
Il.est.aussi.possible.de.créer.un.soulignement.discret.avec.des.bordures..Dans.cet.exemple,.
le.soulignement.par.défaut.est.remplacé.par.une.ligne.en.pointillé.moins.imposante..Lorsque.
l’utilisateur.survole.le.lien.ou.clique.dessus,.la.ligne.devient.continue.afin.d’indiquer.visuellement.que.quelque.chose.vient.de.se.passer :.
a:link, a:visited {
text-decoration: none;
border-bottom: 1px dotted #000;
}
a:hover, a:focus, a:active {
border-bottom-style: solid;
}