CSS et hreflang

Les utilisateurs de FF auront sans doute remarqué que les liens externes de Saute-Mou' s'accompagnent désormais de la mention, en gris et entre crochets, de la langue du site pointé. Les liens internes au site se distinguent d'autant plus facilement qu'ils en sont dépourvus. Comme les utilisateurs d'IE sont privés de cet affichage, voici - histoire de leur donner une raison de plus d'utiliser FF - une capture du phénomène :

Aperçu de l'utilisation de l'attribut hreflang

Jetons un oeil dans les coulisses : en fait, ce résultat repose sur l'utilisation conjointe de l'attribut hreflang et d'un codelet CSS.

Du côté du HTML

En HTML, l'attribut hreflang, qu'on insère dans la balise <a href="...">...</a>, permet de signaler la langue de référence du site pointé par ce lien. Depuis quelque temps, j'inclus dans chaque lien externe la langue du site vers lequel il pointe. Comme je renseigne également l'attribut title, le code d'un lien externe ressemble à ceci :

<a href="http://www.sitexterne.org/" title="Infobulle du lien sous le curseur" hreflang="en">Texte du lien</a>

A l'ombre des CSS en fleurs...

Pour que les liens soient automatiquement suivis de la mention de la langue du site, il faut jouer avec les magi[C]SS et plus particulièrement, avec les pseudo-classes :before et :after. Ces dernières gèrent l'inclusion automatisée de caractères et d'images, avant (:before) ou après (:after) un élément donné. Elles sont parfaitement gérées par FireFox, NS 6+, Mozilla 1.x, Opéra 6+ et Safari, mais, bigre de saperlotte ! elles ne sont pas (encore ?) reconnues par IE.

Dans notre cas, puisque nous voulons ajouter un élément après le lien, c'est la pseudo-classe :after que nous retenons. Voici donc les quelques lignes à ajouter à la CSS, pour que tous les liens, dont l'attribut hreflang est renseigné, affichent la langue du site pointé par le lien, en gris clair et entre crochets :

a[hreflang]:after {
content: "\0000a0[" attr(hreflang) "]";
color: #999;
background : transparent;
}

Simple, efficace et utile.

Saute-Mouton - http://realia.free.fr/sautemouton_avril/newsprt.php?lng=fr&pg=2047 - [Version PDF]