98
Maîtrise des CSS
La. plupart. des. navigateurs. modernes. prennent. en. charge. cette. technique,. mais. les. plus.
anciens,.comme.Internet.Explorer 6.et.ses.versions.antérieures,.l’ignorent.tout.simplement..
Si.vous.le.souhaitez,.vous.pouvez.étendre.cette.méthode.en.distinguant.aussi.les.liens.de.messagerie..Dans.l’exemple.suivant,.j’ajoute.une.petite.icône.d’e-mail.à.tous.les.liens.mailto :.
a[href^="mailto:"] {
background: url(img/email.png) no-repeat right top;
padding-right: 10px;
}
Vous.pouvez.même.signaler.les.protocoles.non.standard.comme.le.protocole.de.messagerie.
instantanée.AOL.(AIM),.avec.une.petite.icône.de.personnage.AIM.(voir.Figure 5.7) :
a[href^="aim:"] {
background: url(img/im.png) no-repeat right top;
padding-right: 10px;
}
instant message
Figure 5.7
Styles de liens d’e-mail
et de messagerie
instantanée.
Signalement de documents téléchargeables et de flux
Quelle.frustration.que.de.cliquer.sur.un.lien.pour.accéder.à.une.autre.page.et.de.découvrir.
que.le.site.lance.le.téléchargement.d’un.PDF.ou.d’un.document.Word !.Par.chance,.les.CSS.
peuvent.aider.à.distinguer.ces.types.de.liens.également..Le.sélecteur.d’attribut.[att$=val].
peut.cibler.les.attributs.qui.se.terminent.par.une.valeur.particulière,.comme..pdf.ou..doc :
a[href$=".pdf"] {
background: url(img/pdfLink.gif) no-repeat right top;
padding-right: 10px;
}
a[href$=".doc"] {
background: url(img/wordLink.gif) no-repeat right top;
padding-right: 10px;
}
Comme.pour.les.précédents.exemples,.vous.pouvez.donc.signaler.les.liens.vers.les.documents.Word.ou.PDF.avec.leur.propre.icône,.afin.de.prévenir.les.utilisateurs.qu’ils.cliquent.
sur.un.document.téléchargeable.au.lieu.d’un.lien.vers.une.autre.page.
De.nombreux.sites.proposent.des.flux.RSS.avec.des.liens.que.les.utilisateurs.doivent.copier.
dans. leurs. lecteurs. de. flux.. Malheureusement,. ceux. qui. cliquent. par. inadvertance. sur. les.
liens.de.ce.type.se.trouvent.conduits.vers.une.page.de.données.apparemment.insensée..Pour.
éviter.cette.surprise,.vous.pouvez.signaler.les.flux.RSS.à.l’aide.d’une.méthode.similaire,.en.
affichant.votre.propre.icône.RSS :
Maîtrise des CSS
La. plupart. des. navigateurs. modernes. prennent. en. charge. cette. technique,. mais. les. plus.
anciens,.comme.Internet.Explorer 6.et.ses.versions.antérieures,.l’ignorent.tout.simplement..
Si.vous.le.souhaitez,.vous.pouvez.étendre.cette.méthode.en.distinguant.aussi.les.liens.de.messagerie..Dans.l’exemple.suivant,.j’ajoute.une.petite.icône.d’e-mail.à.tous.les.liens.mailto :.
a[href^="mailto:"] {
background: url(img/email.png) no-repeat right top;
padding-right: 10px;
}
Vous.pouvez.même.signaler.les.protocoles.non.standard.comme.le.protocole.de.messagerie.
instantanée.AOL.(AIM),.avec.une.petite.icône.de.personnage.AIM.(voir.Figure 5.7) :
a[href^="aim:"] {
background: url(img/im.png) no-repeat right top;
padding-right: 10px;
}
instant message
Figure 5.7
Styles de liens d’e-mail
et de messagerie
instantanée.
Signalement de documents téléchargeables et de flux
Quelle.frustration.que.de.cliquer.sur.un.lien.pour.accéder.à.une.autre.page.et.de.découvrir.
que.le.site.lance.le.téléchargement.d’un.PDF.ou.d’un.document.Word !.Par.chance,.les.CSS.
peuvent.aider.à.distinguer.ces.types.de.liens.également..Le.sélecteur.d’attribut.[att$=val].
peut.cibler.les.attributs.qui.se.terminent.par.une.valeur.particulière,.comme..pdf.ou..doc :
a[href$=".pdf"] {
background: url(img/pdfLink.gif) no-repeat right top;
padding-right: 10px;
}
a[href$=".doc"] {
background: url(img/wordLink.gif) no-repeat right top;
padding-right: 10px;
}
Comme.pour.les.précédents.exemples,.vous.pouvez.donc.signaler.les.liens.vers.les.documents.Word.ou.PDF.avec.leur.propre.icône,.afin.de.prévenir.les.utilisateurs.qu’ils.cliquent.
sur.un.document.téléchargeable.au.lieu.d’un.lien.vers.une.autre.page.
De.nombreux.sites.proposent.des.flux.RSS.avec.des.liens.que.les.utilisateurs.doivent.copier.
dans. leurs. lecteurs. de. flux.. Malheureusement,. ceux. qui. cliquent. par. inadvertance. sur. les.
liens.de.ce.type.se.trouvent.conduits.vers.une.page.de.données.apparemment.insensée..Pour.
éviter.cette.surprise,.vous.pouvez.signaler.les.flux.RSS.à.l’aide.d’une.méthode.similaire,.en.
affichant.votre.propre.icône.RSS :