Comment indiquer la langue d'un contenu en HTML ? Des styles CSS en fonction de la langue
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);
}