convert content to md

1 files changed, 36 insertions, 35 deletions

diff --git a/files/fr/web/css/-moz-context-properties/index.md b/files/fr/web/css/-moz-context-properties/index.md
index c7cf7e321f..5bb568a022 100644
--- a/files/fr/web/css/-moz-context-properties/index.md
+++ b/files/fr/web/css/-moz-context-properties/index.md
@@ -8,13 +8,14 @@ tags:
   - Reference
 translation_of: Web/CSS/-moz-context-properties
 ---
-<div>{{CSSRef}}{{Non-standard_header}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{Non-standard_header}}{{SeeCompatTable}}
 
-<p>Si on intègre une image SVG dans une page web grâce à un élément remplacé (généralement l'élément {{htmlelement("img")}}), il est possible d'appliquer les propriétés de l'élément <code>&lt;img&gt;</code> à l'image SVG (de même pour les autres contextes qui intègreraient une image SVG) grâce à la propriété <code>-moz-context-properties</code>.</p>
+Si on intègre une image SVG dans une page web grâce à un élément remplacé (généralement l'élément {{htmlelement("img")}}), il est possible d'appliquer les propriétés de l'élément `<img>` à l'image SVG (de même pour les autres contextes qui intègreraient une image SVG) grâce à la propriété `-moz-context-properties`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 -moz-context-properties: fill;
 -moz-context-properties: fill, stroke;
 
@@ -22,32 +23,31 @@ translation_of: Web/CSS/-moz-context-properties
 -moz-context-properties: inherit;
 -moz-context-properties: initial;
 -moz-context-properties: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>fill</code></dt>
- <dd>Expose la valeur <code>fill</code> appliquée sur l'image afin qu'elle soit appliquée sur le SVG.</dd>
- <dt><code>stroke</code></dt>
- <dd>Expose la valeur <code>stroke</code> appliquée sur l'image afin qu'elle soit appliquée sur le SVG.</dd>
- <dt><code>fill-opacity</code></dt>
- <dd>Expose la valeur <code>fill-opacity</code> appliquée sur l'image afin qu'elle soit appliquée sur le SVG.</dd>
- <dt><code>stroke-opacity</code></dt>
- <dd>Expose la valeur <code>stroke-opacity</code> appliquée sur l'image afin qu'elle soit appliquée sur le SVG.</dd>
-</dl>
+- `fill`
+  - : Expose la valeur `fill` appliquée sur l'image afin qu'elle soit appliquée sur le SVG.
+- `stroke`
+  - : Expose la valeur `stroke` appliquée sur l'image afin qu'elle soit appliquée sur le SVG.
+- `fill-opacity`
+  - : Expose la valeur `fill-opacity` appliquée sur l'image afin qu'elle soit appliquée sur le SVG.
+- `stroke-opacity`
+  - : Expose la valeur `stroke-opacity` appliquée sur l'image afin qu'elle soit appliquée sur le SVG.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, on embarque un SVG simple dans un élément <code>&lt;img&gt;</code>.</p>
+Dans cet exemple, on embarque un SVG simple dans un élément `<img>`.
 
-<p>Tout d'abord, on définit les propriétés qu'on souhaite appliquer au SVG grâce à la propriété {{cssxref("-moz-context-properties")}}. Par exemple :</p>
+Tout d'abord, on définit les propriétés qu'on souhaite appliquer au SVG grâce à la propriété {{cssxref("-moz-context-properties")}}. Par exemple :
 
-<pre class="brush: css">img {
+```css
+img {
   width: 100px;
   height: 100px;
   -moz-context-properties: fill, stroke;
@@ -56,26 +56,27 @@ translation_of: Web/CSS/-moz-context-properties
 .img1 {
     fill: lime;
     stroke: purple;
-}</pre>
+}
+```
 
-<p>Une fois que c'est fait, on peut utiliser les valeurs {{cssxref("fill")}} et {{cssxref("stroke")}} dans le SVG. Par exemple :</p>
+Une fois que c'est fait, on peut utiliser les valeurs {{cssxref("fill")}} et {{cssxref("stroke")}} dans le SVG. Par exemple :
 
-<pre class="brush: html">&lt;img class="img1" src="data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg'&gt;
-                       &lt;rect width='100%' height='100%' stroke-width='30px'
-                       fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/&gt;&lt;/svg&gt;"&gt;</pre>
+```html
+<img class="img1" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
+                       <rect width='100%' height='100%' stroke-width='30px'
+                       fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>">
+```
 
-<p>Ici, l'attribut <code>src</code> de l'image correspond à une URI de données qui contient une simple image SVG. L'élément <code>&lt;rect&gt;</code> est paramétré afin de récupérer les valeurs <code>fill</code> et <code>stroke</code> telles que fournies par les propriétés {{cssxref("fill")}} et {{cssxref("stroke")}} de l'élément <code>&lt;img&gt;</code> grâce aux mots-clés <code>context-fill</code>/<code>context-stroke</code>. On utilise aussi une couleur de secours pour le remplissage (<code>fill</code>) (qui sera utilisée si le SVG est chargé en dehors de tout contexte, dans un nouvel onglet par exemple). On notera que, si une couleur est directement définie sur le SVG et qu'une couleur contextuelle (ici celle fournie par l'image) est également indiquée, ce sera cette dernière qui l'emportera.</p>
+Ici, l'attribut `src` de l'image correspond à une URI de données qui contient une simple image SVG. L'élément `<rect>` est paramétré afin de récupérer les valeurs `fill` et `stroke` telles que fournies par les propriétés {{cssxref("fill")}} et {{cssxref("stroke")}} de l'élément `<img>` grâce aux mots-clés `context-fill`/`context-stroke`. On utilise aussi une couleur de secours pour le remplissage (`fill`) (qui sera utilisée si le SVG est chargé en dehors de tout contexte, dans un nouvel onglet par exemple). On notera que, si une couleur est directement définie sur le SVG et qu'une couleur contextuelle (ici celle fournie par l'image) est également indiquée, ce sera cette dernière qui l'emportera.
 
-<div class="note">
-<p><strong>Note :</strong> vous pouvez consulter <a href="https://mdn.github.io/css-examples/moz-context-properties/">un exemple complet sur notre dépôt Github</a>.</p>
-</div>
+> **Note :** vous pouvez consulter [un exemple complet sur notre dépôt Github](https://mdn.github.io/css-examples/moz-context-properties/).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété n'est définie dans aucun standard CSS.</p>
+Cette propriété n'est définie dans aucun standard CSS.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.-moz-context-properties")}}</p>
+{{Compat("css.properties.-moz-context-properties")}}