Truc CSS #7 – navigation alternative

Il s’agit en fait d’un truc HTML combiné à du CSS. On peut en effet proposer à nos visiteurs une navigation autre que le click de souris sur un hyperlien en activant des touches d’accès (Accesskey) à la manière des menus dans les applications classiques. Cela peut se reveler très utiles pour les personnes moins valides ainsi que pour les visiteurs très reguliers. Les Windowsiens peuvent utiliser les access-keys via un ALT+Accesskey tandis que les Macosiens utiliseront le CTRL+Accesskey. Le code HTML en est très simple:

<a href="https://fredvandaele.wordpress.com/" accesskey="h"><em>H</em>ome</a>

Nonobstant ces précautions oratoires, il s’agit bien ici de faire connaître au visiteur la présence de ces fameuses Accesskey sur votre site. C’est là qu’intervient le CSS (ouf, j’ai réussi à justifier le titre de l’article).

Première solution: Spécifier le style de la lettre d’activation via un selecteur contextuel de type a em {}. Ca marche, mais ca oblige a rajouter des tag em un peu partout dans le code (beurk).

Seconde solution: Spécifier le style de la lettre d’activation via un pseudo-element CSS2 de type

a:first-letter { text-decoration: underline;}

Beaucoup plus elegant, mais pas directement supporté par notre amis IE qui demandera de rajouter un style sur le link:

.ie_fix a { text-decoration: none; }
Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s


%d blogueurs aiment cette page :