:lang()
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since juillet 2015.
* Some parts of this feature may have varying levels of support.
La fonction de pseudo-classe CSS :lang() permet de définir la mise en forme d'un élément selon la langue dans laquelle il est écrit.
Exemple interactif
*:lang(fr-FR) {
outline: 2px solid deeppink;
}
<p lang="fr-FR">
La musique pendant les trajets en voiture et les longs trajets ne pose pas de
problème, mais utiliser des écouteurs n'est pas la meilleure chose à faire en
conduisant.
</p>
<p lang="pl-PL">
Gdy widzimy znak z narysowaną czaszką i napisem
<strong lang="en-US">DANGER</strong> to lepiej nie wchodzić do środka.
</p>
Syntaxe
:lang(<language-code> [,<language-code> ]*) {
/* ... */
}
Paramètre
<language-code>-
La chaîne de caractères (
<string>) qui définit la langue des éléments qu'on veut sélectionner.
Description
Quand on sélectionne des langues, il y a une correspondance implicite par wildcard, donc :lang(de-DE) correspondra à de-DE, de-DE-1996, de-Latn-DE, de-Latf-DE, et de-Latn-DE-1996.
L'utilisation explicite de wildcards doit inclure une correspondance complète d'un sous-tag de langue, donc :lang("*-F*") est invalide mais :lang("*-FR") est valide.
Exemples
Correspondance des enfants d'une langue donnée
Dans cet exemple, la pseudo-classe :lang est utilisée pour faire correspondre le parent d'une citation en utilisant :first-child. Il ne s'agit pas de la seule solution pour ce type de problème, ni même de la meilleure (qui dépendra du type de document). Les valeurs Unicode sont utilisées pour certains caractères spéciaux de citation.
HTML
<div lang="fr">
<q>
Cette citation française a
<q>une citation</q>
imbriquée.
</q>
</div>
<div lang="de">
<q>
Cette citation allemande a
<q>une citation</q>
imbriquée.
</q>
</div>
<div lang="en">
<q>
Cette citation anglaise a
<q>une citation</q>
imbriquée.
</q>
</div>
CSS
:lang(en) > q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
quotes: "« " " »";
}
:lang(de) > q {
quotes: "»" "«" "\2039" "\203A";
}
Résultat
Correspondance de plusieurs langues
L'exemple suivant montre comment faire correspondre plusieurs langues en fournissant une liste de codes de langue séparés par des virgules. Il est également possible d'utiliser un caractère générique pour faire correspondre les langues dans une plage de langues donnée.
HTML
<p lang="nl">Dit is een Nederlandse paragraaf.</p>
<p lang="de">Dies ist ein deutscher Satz.</p>
<p lang="en">This is an English sentence.</p>
<p lang="en-GB">Matching the language range of English.</p>
<p lang="fr">Ceci est un paragraphe français.</p>
<p lang="fr-Latn-FR">Ceci est un paragraphe français en latin.</p>
CSS
/* Correspond à nl et de */
:lang("nl", "de") {
color: green;
}
/* Omet les guillemets & correspondance insensible à la casse */
:lang(EN, FR) {
color: blue;
}
/* Correspondance générique d'une plage de langues */
:lang("*-Latn") {
color: red;
}
Result
Spécifications
| Specification |
|---|
| Selectors Level 4 # lang-pseudo |
Compatibilité des navigateurs
Loading…
Voir aussi
- La pseudo-classe
:dircorrespondant à la direction du texte - L'attribut HTML
lang - L'attribut HTML
translate - Le référenciel RFC 5646: Balises pour l'identification des langues (également connues sous le nom de BCP 47)