Thomas Zilliox
Expert CSS Freelance à Lyon

Styler les liens en fonction de la langue de destination

J'ai mis du temps à me décider pour la langue de ce site. Notamment, tous les articles de 2013 ont été écrit en anglais. Puisque je ne veux ni supprimer ni tout traduire, je me retrouve avec des pages en français et d'autres en anglais. Pour guider l'utilisateur dans sa visite, j'ai essayé d'indiquer la langue de destination des liens.

Du côté de l'HTML, il existe un attribut pour cela : hreflang.

Du côté des CSS, on peut cibler les éléments en fonction de :

  • la langue de destination avec le sélecteur d'attribut : [hreflang="fr"];
  • la langue courante avec la pseudo-classe adéquate : :lang(fr).

Ainsi pour indiquer qu'un lien pointe vers une page dans une langue différente de la langue courante, j'utilise la règle CSS suivante :

/* Select links written in French that target a non-French page */
:lang(fr) > :link[hreflang]:not([hreflang="fr"])::after,

/* Select links written in English that target a non-English page */
:lang(en) > :link[hreflang]:not([hreflang="en"])::after {
  /* Display the target language */
  content: " (" attr(hreflang) ")";
  font-size: 70%;
  vertical-align: super;
}

Ce qui donne quelque chose comme ça sur ma page d'accueil actuelle :

Exemple d'indication de la langue de destination

Ça vous paraît une bonne idée ?

French is the new English, Thomas.

That's my face!

Thomas ZILLIOX

Je suis Thomas Zilliox, l'homme qui murmurait à l'oreille des chevrons, un développeur CSS freelance sur Lyon.

Je suis aussi le co-créateur de la société Zupple qui crée, organise, et anime des team building et escape games à Lyon.