diff options
Diffstat (limited to 'files/fr/web/css/content/index.md')
| -rw-r--r-- | files/fr/web/css/content/index.md | 160 |
1 files changed, 92 insertions, 68 deletions
diff --git a/files/fr/web/css/content/index.md b/files/fr/web/css/content/index.md index 6c2aedbb70..1e6833ad5f 100644 --- a/files/fr/web/css/content/index.md +++ b/files/fr/web/css/content/index.md @@ -2,34 +2,40 @@ title: content slug: Web/CSS/content translation_of: Web/CSS/content +browser-compat: css.properties.content --- {{CSSRef}} -La propriété **`content`** est utilisée avec les pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}} afin de générer le contenu d'un élément. Les objets insérés via la propriété `content` sont des _[éléments remplacés anonymes](/fr/docs/Web/CSS/Replaced_element)._ +La propriété [CSS](/fr/docs/Web/CSS) **`content`** remplace un élément avec une valeur générée. Les objets insérés via la propriété `content` sont des **[éléments remplacés anonymes](/fr/docs/Web/CSS/Replaced_element)**. ```css -/* Des mots-clés qui ne peuvent pas être mélangés - avec d'autres valeurs */ +/* Des mots-clés qui ne peuvent pas être mélangés avec d'autres valeurs */ content: normal; content: none; -/* Valeurs pour une image */ +/* Valeurs pour une image (<image>) */ content: url("http://www.example.com/test.png"); content: linear-gradient(#e66465, #9198e5); +content: image-set("image1x.png" 1x, "image2x.png" 2x); + +/* Texte alternatif pour le contenu, ajouté avec le niveau 3 de la spécification */ +content: url("http://www.example.com/test.png") / "Le texte alternatif"; /* Une valeur <string>, les caractères non-latin */ /* doivent être échappées par ex. \000A9 for © */ content: 'prefix'; -/* Valeurs utilisant un compteur */ +/* Valeurs utilisant un compteur, éventuellement + avec <list-style-type> */ content: counter(compteur_chapitre); -content: counter(compteur_section, "."); +content: counter(compteur_chapitre, upper-roman); +content: counters(compteur_section, "."); +content: counters(compteur_section, ".", decimal-leading-zero); /* attr() lie à la valeur de l'attribut HTML */ content: attr(value string); -/* Mots-clés dépendant de langue */ -/* ou de la position */ +/* Mots-clés dépendant de langue ou de la position */ content: open-quote; content: close-quote; content: no-open-quote; @@ -37,11 +43,12 @@ content: no-close-quote; /* Sauf avec normal et none, on peut utiliser */ /* plusieurs valeurs de façon simultanée */ -content: open-quote chapter_counter; +content: open-quote counter(compteur_chapitre); /* Valeurs globales */ content: inherit; content: initial; +content: revert; content: unset; ``` @@ -50,23 +57,40 @@ content: unset; ### Valeurs - `none` - - : Le pseudo-élément n'est pas généré. + - : Lorsque cette valeur est appliquée à un pseudo-élément, ce dernier n'est pas généré. Si elle est appliquée à un élément, la valeur n'a pas d'effet. - `normal` - - : Résulte en `none` pour les pseudo-éléments `:before` et `:after`. -- {{cssxref("<string>")}} - - : Contenu sous forme de texte. Les caractères non-latins doivent être encodés avec leur séquence d'échappement Unicode (`\000A9` représentera par exemple le symbole ©). -- {{cssxref("<image>")}} - - : Une image (valeur de type {{cssxref("<image>")}}) de type {{cssxref("<url>")}} ou {{cssxref("<gradient>")}} ou une partie de la page web fournie par la fonction {{cssxref("element()", "element()")}} et qui indique le contenu à afficher. -- `counter()` ou `counters()` (cf. {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}}) - - : Un compteur CSS, généralement un nombre, qui peut être affiché grâce à la fonction {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}} or {{cssxref("counters()")}}. La première possède deux formes : 'counter(_name_)' ou 'counter(_name_, _style_)'. Le texte généré est la valeur du compteur le plus profond possédant un nom donné dans ce pseudo-élément ; il est formaté selon le style indiqué (`decimal` par défaut). La seconde a également deux formes : `counters(name, string)` ou `counters(name, string, style)`. Le texte généré est la valeur de tous les compteurs d'un nom donné dans ce pseudo-élément, depuis le moins profond jusqu'au plus profond séparés par la chaîne définie. Les compteurs sont formatés selon le style indiqué (`decimal` par défaut). Voir [la section sur les compteurs automatiques](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) et sur la numérotation pour plus d'informations. + - : Résulte en `none` pour les pseudo-éléments `::before` et `::after`. +- [`<string>`](/fr/docs/Web/CSS/string) + - : Contenu qui indique le texte alternatif de l'élément. Les caractères non-latins doivent être encodés avec leur séquence d'échappement Unicode (`\000A9` représentera par exemple le symbole ©). +- [`<image>`](/fr/docs/Web/CSS/image) + - : Une image (valeur de type [`<image>`](/fr/docs/Web/CSS/image)) avec une [`url()`](/fr/docs/Web/CSS/url()) ou [`<gradient>`](/fr/docs/Web/CSS/gradient) ou une partie de la page web fournie par la fonction [`element()`](/fr/docs/Web/CSS/element()) et qui indique le contenu à afficher. +- [`counter()`](/fr/docs/Web/CSS/counter()) + - : Un [compteur CSS](/fr/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters), généralement un nombre, généralement produit via les propriétés [`<counter-reset>`](/fr/docs/Web/CSS/counter-reset) et [`<counter-increment>`](/fr/docs/Web/CSS/counter-increment) et qui peut être affiché grâce à la fonction [`counter()`](/fr/docs/Web/CSS/counter()) or [`counters()`](/fr/docs/Web/CSS/counters()). + + [`counter()`](/fr/docs/Web/CSS/counter()) possède deux formes : `counter(_name_)` ou `counter(_name_, _style_)`. Le texte généré est la valeur du compteur le plus profond possédant un nom donné dans ce pseudo-élément ; il est formaté selon le style ([`<list-style-type>`](/fr/docs/Web/CSS/list-style-type) indiqué (`decimal` par défaut). + + [`counters()`](/fr/docs/Web/CSS/counters()) a également deux formes : `counters(name, string)` ou `counters(name, string, style)`. Le texte généré est la valeur de tous les compteurs d'un nom donné dans ce pseudo-élément, depuis le moins profond jusqu'au plus profond, séparés par la chaîne définie. Les compteurs sont formatés selon le style ([`<list-style-type>`](/fr/docs/Web/CSS/list-style-type) indiqué (`decimal` par défaut). + - `attr(X)` - : Renvoie la valeur de l'attribut X de l'élément comme une chaîne. S'il n'existe pas d'attribut X, une chaîne vide est renvoyée. La sensibilité à la casse du nom de l'attribut dépend du langage utilisé. - `open-quote` | `close-quote` - - : Ces valeurs sont remplacées par la chaîne appropriée de la propriété {{ cssxref("quotes") }}. + - : Ces valeurs sont remplacées par la chaîne appropriée de la propriété [`quotes`](/fr/docs/Web/CSS/quotes). - `no-open-quote` | `no-close-quote` - : N'introduit aucun contenu, mais incrémente (respectivement décrémente) le niveau d'imbrication des citations. -### Syntaxe formelle +## Accessibilité + +Le contenu généré par CSS n'est pas inclus dans le [DOM](/fr/docs/Web/API/Document_Object_Model/Introduction). Pour cette raison, il ne fait pas partie de l'[arbre d'accessibilité](/fr/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis) et certaines technologies d'assistances ou certains navigateurs ne permettront pas d'annoncer ce contenu. Si ce contenu porte des informations essentielles à la compréhension de la page, il faut inclure ces informations de façon sémantique dans le document principal. + +- [La prise en charge relative à l'accessibilité pour les contenus générés par CSS — Tink (en anglais)](https://tink.uk/accessibility-support-for-css-generated-content/) +- [Comprendre les règles WCAG 1.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways) +- [Comprendre les critères de succès 1.3.1 | Comprendre WCAG 2.0 (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html) + +## Définition formelle + +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} @@ -74,19 +98,22 @@ content: unset; ### Titres et citations +Dans cet exemple, on insère des marques de citation et le mot « Chapitre » pour chaque titre. + #### HTML ```html <h1>5</h1> -<p> Commençons par une citation de Sir Tim Berners-Lee, - <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet"> - I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.</q> We must understand that there is nothing fundamentally wrong with building on the contributions of others. +<p>Commençons par une citation de Sir Tim Berners-Lee, + <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet"> + I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.</q> + We must understand that there is nothing fundamentally wrong with building on the contributions of others. </p> <h1>6</h1> -<p> Citons le manifeste Mozilla - <q cite="http://www.mozilla.org/about/manifesto/"> - Internet est une ressource publique mondiale qui doit demeurer ouverte et accessible. +<p>Citons le manifeste Mozilla, + <q cite="https://www.mozilla.org/fr/about/manifesto/"> + Internet est une ressource publique mondiale qui doit demeurer ouverte et accessible.</q> </p> ``` @@ -94,19 +121,28 @@ content: unset; ```css q { - color: #00008B; - font-style: italic; + color: blue; +} + +q::before { + content: open-quote; } -q::before { content: open-quote } -q::after { content: close-quote } +q::after { + content: close-quote; +} -h1::before { content: "Chapitre "; } +h1::before { + content: "Chapter "; + /* L'espace après la dernière lettre est + voulu afin de détacher le mot du reste + du contenu */ +} ``` #### Résultat -{{EmbedLiveSample('Titres_et_citations', 460, 100)}} +{{EmbedLiveSample('', 460, 310)}} ### Ajouter une icône avant un lien @@ -120,15 +156,15 @@ h1::before { content: "Chapitre "; } ```css a::before{ - content: url(https://mozorg.cdn.mozilla.net/media/img/favicon.ico) " MOZILLA: "; - font: x-small Arial,freeSans,sans-serif; - color: gray; + content: url("mdn-favicon16.png") " MOZILLA: "; + font: x-small Arial, freeSans, sans-serif; + color: gray; } ``` #### Résultat -{{EmbedLiveSample('Ajouter_une_icône_avant_un_lien', 200, 60)}} +{{EmbedLiveSample('', 200, 60)}} ### Utiliser les classes @@ -137,10 +173,10 @@ a::before{ ```html <h2>Top des ventes</h2> <ol> - <li>Thriller politique</li> - <li class="nouveaute">Histoires effrayantes</li> - <li>Ma biographie</li> - <li class="nouveaute">Bit-lit</li> + <li>Thriller politique</li> + <li class="nouveaute">Histoires effrayantes</li> + <li>Ma biographie</li> + <li class="nouveaute">Bit-lit</li> </ol> ``` @@ -148,14 +184,14 @@ a::before{ ```css .nouveaute::after { - content: " Nouveau !"; - color: red; + content: " Nouveau !"; + color: red; } ``` #### Résultat -{{EmbedLiveSample('Utiliser_les_classes', 300, 200)}} +{{EmbedLiveSample('', 300, 200)}} ### Utiliser les attributs d'image et d'élément @@ -183,11 +219,11 @@ a::after { } #moz::before { - content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico"); + content: url("mdn-favicon16.png"); } #mdn::before { - content: url("https://mozorg.cdn.mozilla.net/files/7691/mdn-favicon16.ico"); + content: url("mdn-favicon16.png"); } li { @@ -197,11 +233,11 @@ li { #### Résultat -{{EmbedLiveSample("Utiliser_les_attributs_dimage_et_délément", '100%', 160)}} +{{EmbedLiveSample("", '100%', 160)}} ### Remplacer un élément -Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est possible de remplacer le contenu d'un élément avec une valeur de type {{cssxref("<url>")}} ou {{cssxref("<image>")}} . Le contenu ajouté avec `::before` ou avec `::after` ne sera plus généré car l'élément sera devenu un élément remplacé. +Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est possible de remplacer le contenu d'un élément avec une [`url()`](/fr/docs/Web/CSS/url()) ou une valeur de type [`<image>`](/fr/docs/Web/CSS/image). Le contenu ajouté avec `::before` ou avec `::after` ne sera plus généré car l'élément sera devenu un élément remplacé. #### HTML @@ -213,7 +249,7 @@ Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est p ```css #replaced { - content: url("https://mdn.mozillademos.org/files/12668/MDN.svg"); + content: url("mdn.svg"); } #replaced::after { /* Ceci ne sera pas affiché, */ @@ -224,33 +260,21 @@ Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est p #### Résultat -{{EmbedLiveSample('Remplacer_un_élément', '100%', 200)}} - -## Accessibilité - -Le contenu généré par CSS n'est pas inclus dans le [DOM](/fr/docs/Web/API/Document_Object_Model/Introduction). Pour cette raison, il ne fait pas partie de l'[arbre d'accessibilité](/fr/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis) et certaines technologies d'assistances ou certains navigateurs ne permettront pas d'annoncer ce contenu. Si ce contenu porte des informations essentielles à la compréhension de la page, il faut inclure ces informations de façon sémantique dans le document principal. - -- [La prise en charge relative à l'accessibilité pour les contenus générés par CSS generated content – Tink (en anglais)](https://tink.uk/accessibility-support-for-css-generated-content/) -- [Comprendre les règles WCAG 1.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways) -- [_Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html) +{{EmbedLiveSample('', '100%', 250)}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName("CSS3 Content", "#content-property", "content")}} | {{Spec2("CSS3 Content")}} | | -| {{SpecName('CSS2.1', 'generate.html#content', 'content')}} | {{Spec2('CSS2.1')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.content")}} +{{Compat}} ## Voir aussi -- {{cssxref("::after")}} -- {{cssxref("::before")}} -- {{cssxref("quotes")}} -- {{Cssxref("::marker")}} -- {{cssxref("url()", "url()")}} +- [Les éléments remplacés](/fr/docs/Web/CSS/Replaced_element) +- [`::after`](/fr/docs/Web/CSS/::after) +- [`::before`](/fr/docs/Web/CSS/::before) +- [`::marker`](/fr/docs/Web/CSS/::marker) +- [`quotes`](/fr/docs/Web/CSS/quotes) +- La fonction [`url()`](/fr/docs/Web/CSS/url()) |