Comment indiquer la langue d'un contenu en HTML ? Des styles CSS en fonction de la langue

Une fois qu'on a une information précise sur la langue des contenus dans le code HTML, on peut, si on le souhaite, exploiter cette information en CSS. Tout se joue au niveau des sélecteurs CSS. On va pouvoir utiliser deux mécanismes:

La pseudo-classe :lang (CSS 2.1) permet de sélectionner des éléments en fonction de leur langue


 la pseudo-classe :lang()
 ou un sélecteur d'attribut.

Lorsqu'un élément HTML possède un attribut lang, la valeur de cet attribut est valable pour cet élément, mais aussi pour tous ses enfants et descendants tant que cette information n'est pas contredite par un autre attribut lang. Ainsi, si j'ai une page entièrement en japonais, je peux écrire <html lang="ja"> et tous les éléments de la page seront considérés par le navigateur comme étant en japonais.

Ce mécanisme explique le fonctionnement de la pseudo-classe :lang (CSS 2.1), qui permet de sélectionner des éléments en fonction de leur langue, que ces éléments aient un attribut lang ou pas:

q         { quotes: '"' '"'; } 

q:lang(fr) { quotes: '«\00A0' '\00A0»'; }

q:lang(en) { quotes: '?' '?'; }

 

À l'inverse, les sélecteurs d'attributs (CSS 2.1) seront moins puissants... mais plus précis et parfois utiles. Par exemple, si on a une liste d'articles (élément HTML5 article) avec un attribut lang sur chaque article pour indiquer clairement sa langue, on pourra utiliser cet attribut un peu comme une classe:

 #news > article[lang=de] { 
 background-image: url(flag-de.png);
}
#news > article[lang=it] {
 background-image: url(flag-it.png);
}


HTML / CSS