Remove mozillademo links from CSS (#3642)

* Work - part 1 / N

* background-attachment

* background-blend-mode

* background-image

* background-origin

* Background position

* background-repeat

* background-size

* border-image

* border-image-outset

* border-image-repeat

* border-image-slice

* border-image-width

* clip-path

* content

* cross-fade()

* border-radius-generator

* multiple bckgrnd

* vertical-align

* url

* text-combine-upright

* position_value

* image-rendering

* using css gradients

* font-stretch

* font-stretch - add bcd key

* font-variant-numeric

* font-weight

* image-orientation

* list-style-image

* mask-border

* mask-clip

* mask-composite

* mask-image

* mask-mode

* mask-origin

* mask-position

* mask-size

* object-fit

* object-position

* position

* Various fixes and improvements

* Remove unecessary files

* Remove unecessary files (part 2)

* Missed level 1 fixes

Co-authored-by: cw118 <carolyn94118@gmail.com>

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 &copy; */
 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("&lt;string&gt;")}}
-  - : 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("&lt;image&gt;")}}
-  - : Une image (valeur de type {{cssxref("&lt;image&gt;")}}) de type {{cssxref("&lt;url&gt;")}} ou {{cssxref("&lt;gradient&gt;")}} 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&nbsp;: `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&nbsp;; 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&nbsp;: `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 «&nbsp;Chapitre&nbsp;» 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("&lt;url&gt;")}} ou {{cssxref("&lt;image&gt;")}} . 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())