Indiquez visuellement la langue d’une page en lien
… ne marche (hélas…) qu’avec les navigateurs validant bien les CSS 
C’est en faisant intervenir les pseudo-attributs du langage CSS que l’on peut préciser ainsi à l’internaute la langue d’une page liée.
Un site Web peut contenir toutes sortes de liens, envoyant le lecteur intéressé vers d’autres sites, sans que celui-ci puisse connaître par avance la langue de site lié. La balise A, marquant le lien, dispose d’un attribut hreflang, mais celui-ci n’est généralement visible qu’en se plongeant dans le code source.
Les pseudo attributs de CSS permettent cependant de résoudre de manière graphique cette situation. Plus précisément, il est possible d’afficher, via CSS, le contenu de l’attribut hreflang après le lien, sans pour autant devoir modifier le code HTML ni gêner l’accessibilité.
Un lien vers Web Tolosa pourrait ainsi prendre cette forme : <a href="http://www.webtolosa.fr/" hreflang="fr-FR">Web Tolosa </a>
Les codes de langues sont le plus souvent composés de quatre lettres : les deux premières correspondent à la langue, la deux dernières au pays d’application. « pt-BR » indiquera ainsi la langue portugaise telle que parlé au Brésil, « en-UK » l’anglais parlé en Angleterre; « en-US » l’anglais des Etats-Unis d’Amérique.
La CSS permettant d’afficher la langue pourrait être ainsi :
a[hreflang]:after { content: " [" attr(hreflang) "] "; }
ce qui donnera :
Web Tolosa[fr-FR]
On pourra même préciser le tout :
a[hreflang='fr-FR']:after { content: " [page en français (France)] "; }
Pour obtenir :
Web Tolosa [page en français (France)]
Notez bien que comme de nombreuses techniques avancées CSS, celle-ci n’est accessible qu’aux navigateurs modernes, ce qui met malheureusement souvent IE6 hors-jeu. On attends IE7…
Le fin du fin (mais vous ne verrez rien sous Internet Explorer 6 :[ , testez avec Firefox par exemple): afficher non pas un code de langue… mais un petit drapeau de pays ou un gif, comme :
Source FR ou Source Anglaise
Code détaillé : <html>
<head>
<style type="text/css">
a[hreflang="fr"]:before { content: url("CSS_fr.gif"); }
a[hreflang]:after {
content: "[" attr(hreflang) "]";
color : #999;
background : transparent;
font-size: 10px;
}
</style>
</head>
<body>
<a href="http://www.webtolosa.fr/" hreflang="fr" target="_blank">Source FR</a><br>
<a href="http://www.webtolosa.fr/" hreflang="us" target="_blank">Source Anglaise</a>
</body>
</html>
Cadeaux : le PSD du gifs FR et le PSD du gifs UK
:*
No Responses to “Indiquez visuellement la langue d’une page en lien”