diff options
Diffstat (limited to 'files/fr/web/css/content')
| -rw-r--r-- | files/fr/web/css/content/index.md | 271 |
1 files changed, 134 insertions, 137 deletions
diff --git a/files/fr/web/css/content/index.md b/files/fr/web/css/content/index.md index cd5ad04b5f..67c293ba5a 100644 --- a/files/fr/web/css/content/index.md +++ b/files/fr/web/css/content/index.md @@ -7,11 +7,12 @@ tags: - Reference translation_of: Web/CSS/content --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La propriété <strong><code>content</code></strong> 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é <code>content</code> sont des <em><a href="/fr/docs/Web/CSS/Replaced_element">éléments remplacés anonymes</a>.</em></p> +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)._ -<pre class="brush: css no-line-numbers">/* Des mots-clés qui ne peuvent pas être mélangés +```css +/* Des mots-clés qui ne peuvent pas être mélangés avec d'autres valeurs */ content: normal; content: none; @@ -20,8 +21,8 @@ content: none; content: url("http://www.example.com/test.png"); content: linear-gradient(#e66465, #9198e5); -/* Une valeur <string>, les caractères non-latin */ -/* doivent être échappées par ex. \000A9 for &copy; */ +/* Une valeur <string>, les caractères non-latin */ +/* doivent être échappées par ex. \000A9 for © */ content: 'prefix'; /* Valeurs utilisant un compteur */ @@ -46,56 +47,57 @@ content: open-quote chapter_counter; content: inherit; content: initial; content: unset; -</pre> - -<h2 id="Syntaxe">Syntaxe</h2> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>none</code></dt> - <dd>Le pseudo-élément n'est pas généré.</dd> - <dt><code>normal</code></dt> - <dd>Résulte en <code>none</code> pour les pseudo-éléments <code>:before</code> et <code>:after</code>.</dd> - <dt>{{cssxref("<string>")}}</dt> - <dd>Contenu sous forme de texte. Les caractères non-latins doivent être encodés avec leur séquence d'échappement Unicode (<code>\000A9</code> représentera par exemple le symbole ©).</dd> - <dt>{{cssxref("<image>")}}</dt> - <dd>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.</dd> - <dt><code>counter()</code> ou <code>counters()</code> (cf. {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}})</dt> - <dd>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(<var>name</var>)' ou 'counter(<var>name</var>, <var>style</var>)'. 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é (<code>decimal</code> par défaut). La seconde a également deux formes : <code>counters(<var>name</var>, <var>string</var>)</code> ou <code>counters(<var>name</var>, <var>string</var>, <var>style</var>)</code>. 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é (<code>decimal</code> par défaut). Voir <a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">la section sur les compteurs automatiques</a> et sur la numérotation pour plus d'informations.</dd> - <dt><code>attr(X)</code></dt> - <dd>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é.</dd> - <dt><code>open-quote</code> | <code>close-quote</code></dt> - <dd>Ces valeurs sont remplacées par la chaîne appropriée de la propriété {{ cssxref("quotes") }}.</dd> - <dt><code>no-open-quote</code> | <code>no-close-quote</code></dt> - <dd>N'introduit aucun contenu, mais incrémente (respectivement décrémente) le niveau d'imbrication des citations.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +``` + +## Syntaxe + +### Valeurs + +- `none` + - : Le pseudo-élément n'est pas généré. +- `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. +- `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") }}. +- `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 {{csssyntax}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Titres_et_citations">Titres et citations</h3> +### Titres et citations -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: 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> +```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> -<h1>6</h1> -<p> Citons le manifeste Mozilla - <q cite="http://www.mozilla.org/about/manifesto/"> +<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></pre> +</p> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css">q { +```css +q { color: #00008B; font-style: italic; } @@ -103,67 +105,79 @@ content: unset; q::before { content: open-quote } q::after { content: close-quote } -h1::before { content: "Chapitre "; }</pre> +h1::before { content: "Chapitre "; } +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample('Titres_et_citations', 460, 100)}}</p> +{{EmbedLiveSample('Titres_et_citations', 460, 100)}} -<h3 id="Ajouter_une_icône_avant_un_lien">Ajouter une icône avant un lien</h3> +### Ajouter une icône avant un lien -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html"><a href="http://www.mozilla.org/fr/">Accueil</a></pre> +```html +<a href="http://www.mozilla.org/fr/">Accueil</a> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css">a::before{ +```css +a::before{ content: url(https://mozorg.cdn.mozilla.net/media/img/favicon.ico) " MOZILLA: "; font: x-small Arial,freeSans,sans-serif; color: gray; -}</pre> +} +``` -<h4 id="Résultat_2">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample('Ajouter_une_icône_avant_un_lien', 200, 60)}}</p> +{{EmbedLiveSample('Ajouter_une_icône_avant_un_lien', 200, 60)}} -<h3 id="Utiliser_les_classes">Utiliser les classes</h3> +### Utiliser les classes -<h4 id="HTML_3">HTML</h4> +#### HTML -<pre class="brush: 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> -</ol></pre> +```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> +</ol> +``` -<h4 id="CSS_3">CSS</h4> +#### CSS -<pre class="brush: css">.nouveaute::after { +```css +.nouveaute::after { content: " Nouveau !"; color: red; -}</pre> +} +``` -<h4 id="Résultat_3">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample('Utiliser_les_classes', 300, 200)}}</p> +{{EmbedLiveSample('Utiliser_les_classes', 300, 200)}} -<h3 id="Utiliser_les_attributs_d’image_et_d’élément">Utiliser les attributs d’image et d’élément</h3> +### Utiliser les attributs d’image et d’élément -<p>Dans cet exemple, on insère une image avant chaque lien et on ajoute son identifiant après.</p> +Dans cet exemple, on insère une image avant chaque lien et on ajoute son identifiant après. -<h4 id="HTML_4">HTML</h4> +#### HTML -<pre class="brush: html"><ul> - <li><a id="moz" href="https://www.mozilla.org/">Page d'accueil Mozilla</a></li> - <li><a id="mdn" href="https://developer.mozilla.org/">Mozilla Developer Network</a></li> -</ul></pre> +```html +<ul> + <li><a id="moz" href="https://www.mozilla.org/">Page d'accueil Mozilla</a></li> + <li><a id="mdn" href="https://developer.mozilla.org/">Mozilla Developer Network</a></li> +</ul> +``` -<h4 id="CSS_4">CSS</h4> +#### CSS -<pre class="brush: css">a { +```css +a { text-decoration: none; border-bottom: 3px dotted navy; } @@ -182,82 +196,65 @@ a::after { li { margin: 1em; -}</pre> +} +``` -<h4 id="Résultat_4">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample("Utiliser_les_attributs_d’images_et_d’élément", '100%', 160)}}</p> +{{EmbedLiveSample("Utiliser_les_attributs_d’images_et_d’élément", '100%', 160)}} -<h3 id="Remplacer_un_élément">Remplacer un élément</h3> +### Remplacer un élément -<p>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 <code>::before</code> ou avec <code>::after</code> ne sera plus généré car l'élément sera devenu un élément remplacé.</p> +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é. -<h4 id="HTML_5">HTML</h4> +#### HTML -<pre class="brush: html"><div id="replaced">Mozilla</div> -</pre> +```html +<div id="replaced">Mozilla</div> +``` -<h4 id="CSS_5">CSS</h4> +#### CSS -<pre class="brush: css">#replaced { +```css +#replaced { content: url("https://mdn.mozillademos.org/files/12668/MDN.svg"); } #replaced::after { /* Ceci ne sera pas affiché, */ /* l'élément sera un élément remplacé */ content: " (" attr(id) ")"; -}</pre> +} +``` -<h4 id="Résultat_5">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample('Remplacer_un_élément', '100%', 200)}}</p> +{{EmbedLiveSample('Remplacer_un_élément', '100%', 200)}} -<h2 id="Accessibilité">Accessibilité</h2> +## Accessibilité -<p>Le contenu généré par CSS n'est pas inclus dans le <a href="/fr/docs/Web/API/Document_Object_Model/Introduction">DOM</a>. Pour cette raison, il ne fait pas partie de l'<a href="/fr/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis">arbre d'accessibilité</a> 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.</p> +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. -<ul> - <li><a href="https://tink.uk/accessibility-support-for-css-generated-content/">La prise en charge relative à l'accessibilité pour les contenus générés par CSS generated content – Tink (en anglais)</a></li> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles WCAG 1.3</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html"><em>Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li> -</ul> +- [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) -<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("CSS3 Content", "#content-property", "content")}}</td> - <td>{{Spec2("CSS3 Content")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'generate.html#content', 'content')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("css.properties.content")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> +## Spécifications -<ul> - <li>{{cssxref("::after")}}</li> - <li>{{cssxref("::before")}}</li> - <li>{{cssxref("quotes")}}</li> - <li>{{Cssxref("::marker")}}</li> - <li>{{cssxref("url()", "url()")}}</li> -</ul> +| 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}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.content")}} + +## Voir aussi + +- {{cssxref("::after")}} +- {{cssxref("::before")}} +- {{cssxref("quotes")}} +- {{Cssxref("::marker")}} +- {{cssxref("url()", "url()")}} |