From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/content/index.md | 271 +++++++++++++++++++------------------- 1 file changed, 134 insertions(+), 137 deletions(-) (limited to 'files/fr/web/css/content') 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 --- -
{{CSSRef}}
+{{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.

+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)._ -
/* 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 , 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;
-
- -

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 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

+``` + +## 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}} -

Exemples

+## Exemples -

Titres et citations

+### Titres et citations -

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>
+```html
+
5

+
 Commençons par une citation de Sir Tim Berners-Lee,
+    
+        I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.  We must understand that there is nothing fundamentally wrong with building on the contributions of others.
+

 
-<h1>6</h1>
-<p> Citons le manifeste Mozilla
-    <q cite="http://www.mozilla.org/about/manifesto/">
+
6

+
 Citons le manifeste Mozilla
+    
         Internet est une ressource publique mondiale qui doit demeurer ouverte et accessible.
-</p>
+

+``` -

CSS

+#### 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 "; }
+h1::before { content: "Chapitre "; } +``` -

Résultat

+#### Résultat -

{{EmbedLiveSample('Titres_et_citations', 460, 100)}}

+{{EmbedLiveSample('Titres_et_citations', 460, 100)}} -

Ajouter une icône avant un lien

+### Ajouter une icône avant un lien -

HTML

+#### HTML -
<a href="http://www.mozilla.org/fr/">Accueil</a>
+```html +Accueil +``` -

CSS

+#### 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;
-}
+} +``` -

Résultat

+#### Résultat -

{{EmbedLiveSample('Ajouter_une_icône_avant_un_lien', 200, 60)}}

+{{EmbedLiveSample('Ajouter_une_icône_avant_un_lien', 200, 60)}} -

Utiliser les classes

+### Utiliser les classes -

HTML

+#### 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>
+```html +

Top des ventes

+
    +
  1. Thriller politique
    2. +
  2. Histoires effrayantes
    3. +
  3. Ma biographie
    4. +
  4. Bit-lit
    5. +
+``` -

CSS

+#### CSS -
.nouveaute::after {
+```css
+.nouveaute::after {
     content: " Nouveau !";
     color: red;
-}
+} +``` -

Résultat

+#### Résultat -

{{EmbedLiveSample('Utiliser_les_classes', 300, 200)}}

+{{EmbedLiveSample('Utiliser_les_classes', 300, 200)}} -

Utiliser les attributs d’image et d’élément

+### Utiliser les attributs d’image et d’élément -

Dans cet exemple, on insère une image avant chaque lien et on ajoute son identifiant après.

+Dans cet exemple, on insère une image avant chaque lien et on ajoute son identifiant après. -

HTML

+#### 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>
+```html + +``` -

CSS

+#### CSS -
a {
+```css
+a {
   text-decoration: none;
   border-bottom: 3px dotted navy;
 }
@@ -182,82 +196,65 @@ a::after {
 
 li {
   margin: 1em;
-}
+} +``` -

Résultat

+#### Résultat -

{{EmbedLiveSample("Utiliser_les_attributs_d’images_et_d’élément", '100%', 160)}}

+{{EmbedLiveSample("Utiliser_les_attributs_d’images_et_d’élément", '100%', 160)}} -

Remplacer un élément

+### 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 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é. -

HTML

+#### HTML -
<div id="replaced">Mozilla</div>
-
+```html +
Mozilla
+``` -

CSS

+#### 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) ")";
-}
+} +``` -

Résultat

+#### Résultat -

{{EmbedLiveSample('Remplacer_un_élément', '100%', 200)}}

+{{EmbedLiveSample('Remplacer_un_élément', '100%', 200)}} -

Accessibilité

+## Accessibilité -

Le contenu généré par CSS n'est pas inclus dans le DOM. Pour cette raison, il ne fait pas partie de l'arbre d'accessibilité 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.

+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) -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{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

+## 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}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.content")}} + +## Voir aussi + +- {{cssxref("::after")}} +- {{cssxref("::before")}} +- {{cssxref("quotes")}} +- {{Cssxref("::marker")}} +- {{cssxref("url()", "url()")}} -- cgit v1.2.3-54-g00ecf