diff options
Diffstat (limited to 'files/fr/web/css/_colon_lang/index.md')
| -rw-r--r-- | files/fr/web/css/_colon_lang/index.md | 157 |
1 files changed, 67 insertions, 90 deletions
diff --git a/files/fr/web/css/_colon_lang/index.md b/files/fr/web/css/_colon_lang/index.md index b564018c4e..ca2ccc2a82 100644 --- a/files/fr/web/css/_colon_lang/index.md +++ b/files/fr/web/css/_colon_lang/index.md @@ -1,131 +1,108 @@ --- title: ':lang' -slug: 'Web/CSS/:lang' +slug: Web/CSS/:lang tags: - CSS - Pseudo-classe - Reference -translation_of: 'Web/CSS/:lang' +translation_of: Web/CSS/:lang --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <code><strong>:lang</strong></code> permet de définir la mise en forme d'un élément selon la langue dans laquelle il est écrit.</p> +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:lang`** permet de définir la mise en forme d'un élément selon la langue dans laquelle il est écrit. -<pre class="brush: css no-line-numbers">/* Correspond aux paragraphes, uniquement si ceux-ci */ +```css +/* Correspond aux paragraphes, uniquement si ceux-ci */ /* sont indiqués comme étant en anglais (en) */ p:lang(en) { quotes: '\201C' '\201D' '\2018' '\2019'; -}</pre> - -<div class="note"> -<p><strong>Note :</strong> En HTML, la langue d'un élément est déterminée par l'attribut {{htmlattrxref("lang")}}, l'élément {{HTMLElement("meta")}} et d'autres informations comme les en-têtes HTTP ; pour les autres types de documents, d'autres méthodes peuvent être utilisées.</p> +} +``` -<p>Les chaînes de caractères admissibles pour définir des langues sont définies dans la spécification HTML 4.0.</p> -</div> +> **Note :** En HTML, la langue d'un élément est déterminée par l'attribut {{htmlattrxref("lang")}}, l'élément {{HTMLElement("meta")}} et d'autres informations comme les en-têtes HTTP ; pour les autres types de documents, d'autres méthodes peuvent être utilisées. +> +> Les chaînes de caractères admissibles pour définir des langues sont définies dans la spécification HTML 4.0. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +### Syntaxe formelle {{csssyntax}} -<h3 id="Paramètre">Paramètre</h3> +### Paramètre -<dl> - <dt><code>language-code</code></dt> - <dd>La chaîne de caractères ({{cssxref("<string>")}}) qui définit la langue des éléments qu'on veut sélectionner.</dd> -</dl> +- `language-code` + - : La chaîne de caractères ({{cssxref("<string>")}}) qui définit la langue des éléments qu'on veut sélectionner. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans cet exemple, la pseudo-classe <code>:lang</code> est utilisée pour faire correspondre le parent d'une citation en utilisant {{cssxref(":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.</p> +Dans cet exemple, la pseudo-classe `:lang` est utilisée pour faire correspondre le parent d'une citation en utilisant {{cssxref(":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. -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">:lang(fr) > Q { +```css +:lang(fr) > Q { quotes: '« ' ' »'; } -:lang(de) > Q { +:lang(de) > Q { quotes: '»' '«' '\2039' '\203A'; } -:lang(en) > Q { +:lang(en) > Q { quotes: '\201C' '\201D' '\2018' '\2019'; } -</pre> +``` -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><div lang="fr"> - <q> +```html +<div lang="fr"> + <q> Cette citation française a - <q>une citation</q> + <q>une citation</q> imbriquée. - </q> -</div> + </q> +</div> -<div lang="de"> - <q> +<div lang="de"> + <q> Cette citation allemande a - <q>une citation</q> + <q>une citation</q> imbriquée. - </q> -</div> + </q> +</div> -<div lang="en"> - <q> +<div lang="en"> + <q> Cette citation anglaise a - <q>une citation</q> + <q>une citation</q> imbriquée. - </q> -</div> -</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample('Exemple', '350')}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>Ajout du <em>joker</em> pour correspondre à toutes les langues. Ajout des listes de langues séparées par des virgules.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td>Aucune modification significative.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("css.selectors.lang")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{cssxref(":dir")}}</li> - <li>L'attribut HTML {{htmlattrxref("lang")}}</li> - <li><a href="/fr/docs/Web/API/HTMLElement/lang">Propriété <code>lang</code> du DOM</a></li> - <li><a href="https://www.w3.org/TR/REC-html40/struct/dirlang.html#h-8.1.1">Les codes de langues selon W3C HTML4 (en anglais)</a></li> - <li><a href="https://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59132807">L'attribut <code>lang</code> selon W3C DOM Level 2 HTML (en anglais)</a></li> - <li><a href="https://tools.ietf.org/html/bcp47">Les codes de langues BCP 47</a></li> -</ul> + </q> +</div> +``` + +### Résultat + +{{EmbedLiveSample('Exemple', '350')}} + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------- | +| {{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}} | {{Spec2('CSS4 Selectors')}} | Ajout du _joker_ pour correspondre à toutes les langues. Ajout des listes de langues séparées par des virgules. | +| {{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}} | {{Spec2('CSS3 Selectors')}} | Aucune modification significative. | +| {{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}} | {{Spec2('CSS2.1')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("css.selectors.lang")}} + +## Voir aussi + +- {{cssxref(":dir")}} +- L'attribut HTML {{htmlattrxref("lang")}} +- [Propriété `lang` du DOM](/fr/docs/Web/API/HTMLElement/lang) +- [Les codes de langues selon W3C HTML4 (en anglais)](https://www.w3.org/TR/REC-html40/struct/dirlang.html#h-8.1.1) +- [L'attribut `lang` selon W3C DOM Level 2 HTML (en anglais)](https://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59132807) +- [Les codes de langues BCP 47](https://tools.ietf.org/html/bcp47) |