convert content to md

1 files changed, 72 insertions, 83 deletions

diff --git a/files/fr/web/css/mask-origin/index.md b/files/fr/web/css/mask-origin/index.md
index 85bf81428e..20424606ee 100644
--- a/files/fr/web/css/mask-origin/index.md
+++ b/files/fr/web/css/mask-origin/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/mask-origin
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>mask-origin</code></strong> permet de définir l'origine à partir de laquelle placer le masque.</p>
+La propriété **`mask-origin`** permet de définir l'origine à partir de laquelle placer le masque.
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 mask-origin: content-box;
 mask-origin: padding-box;
 mask-origin: border-box;
@@ -34,48 +35,47 @@ mask-origin: view-box, fill-box, border-box;
 mask-origin: inherit;
 mask-origin: initial;
 mask-origin: unset;
-</pre>
-
-<p>Pour les éléments qui sont affichés avec une unique boîte, cette propriété définit la zone de positionnement du masque. Autrement dit, cette propriété indique l'origine de la position pour l'image définie via {{cssxref("mask-image")}}. Pour les éléments qui sont affichés comme plusieurs boîtes (les boîtes <em>inline</em> ou plusieurs lignes ou plusieurs boîtes sur plusieurs pages), elle définit les boîtes sur lesquelles {{cssxref("box-decoration-break")}} agira pour déterminer la zone de positionnement du masque.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<p>Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.</p>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>content-box</code></dt>
- <dd>La position de la zone est relative à la boîte de contenu.</dd>
- <dt><code>padding-box</code></dt>
- <dd>La position de la zone est relative à la boîte de remplissage (<em>padding</em>). Pour les boîtes simples, <code>0 0</code> désigne le coin en haut à gauche de la bordure de cette boîte et <code>100% 100%</code> le coin en bas à droite.</dd>
- <dt><code>border-box</code></dt>
- <dd>La position de la zone est relative à la boîte de bordure.</dd>
- <dt><code>margin-box</code></dt>
- <dd>La position de la zone est relative à la boîte de marge.</dd>
- <dt><code>fill-box</code></dt>
- <dd>La position de la zone est relative à la boîte liée à l'objet (<em><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#__svg__SVGLocatable__getBBox">bounding box</a></em>).</dd>
- <dt><code>stroke-box</code></dt>
- <dd>La position de la zone est relative à la boîte de contour de l'objet (<em><a href="https://www.w3.org/TR/css-masking/#stroke-bounding-box">stroke bounding box</a></em>).</dd>
- <dt><code>view-box</code></dt>
- <dd>La zone d'affichage (<em>viewport</em>) SVG la plus proche est utilisée comme boîte de référence. Si l'attribut {{svgattr("viewBox")}} est défini pour l'élément qui crée la zone d'affichage, la boîte de référence est positionnée à l'origine du système de coordonnées établi par <code>viewBox</code>. Les dimensions de la boîte de référence sont les valeurs de largeur et de hauteur de <code>viewBox</code>.</dd>
- <dt><code>content</code>{{non-standard_inline}}</dt>
- <dd>Synonyme de <code>content-box</code>.</dd>
- <dt><code>padding</code>{{non-standard_inline}}</dt>
- <dd>Synonyme de <code>padding-box</code>.</dd>
- <dt><code>border</code>{{non-standard_inline}}</dt>
- <dd>Synonyme de <code>border-box</code>.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+Pour les éléments qui sont affichés avec une unique boîte, cette propriété définit la zone de positionnement du masque. Autrement dit, cette propriété indique l'origine de la position pour l'image définie via {{cssxref("mask-image")}}. Pour les éléments qui sont affichés comme plusieurs boîtes (les boîtes _inline_ ou plusieurs lignes ou plusieurs boîtes sur plusieurs pages), elle définit les boîtes sur lesquelles {{cssxref("box-decoration-break")}} agira pour déterminer la zone de positionnement du masque.
+
+## Syntaxe
+
+Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.
+
+### Valeurs
+
+- `content-box`
+  - : La position de la zone est relative à la boîte de contenu.
+- `padding-box`
+  - : La position de la zone est relative à la boîte de remplissage (_padding_). Pour les boîtes simples, `0 0` désigne le coin en haut à gauche de la bordure de cette boîte et `100% 100%` le coin en bas à droite.
+- `border-box`
+  - : La position de la zone est relative à la boîte de bordure.
+- `margin-box`
+  - : La position de la zone est relative à la boîte de marge.
+- `fill-box`
+  - : La position de la zone est relative à la boîte liée à l'objet (_[bounding box](https://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#__svg__SVGLocatable__getBBox)_).
+- `stroke-box`
+  - : La position de la zone est relative à la boîte de contour de l'objet (_[stroke bounding box](https://www.w3.org/TR/css-masking/#stroke-bounding-box)_).
+- `view-box`
+  - : La zone d'affichage (_viewport_) SVG la plus proche est utilisée comme boîte de référence. Si l'attribut {{svgattr("viewBox")}} est défini pour l'élément qui crée la zone d'affichage, la boîte de référence est positionnée à l'origine du système de coordonnées établi par `viewBox`. Les dimensions de la boîte de référence sont les valeurs de largeur et de hauteur de `viewBox`.
+- `content`{{non-standard_inline}}
+  - : Synonyme de `content-box`.
+- `padding`{{non-standard_inline}}
+  - : Synonyme de `padding-box`.
+- `border`{{non-standard_inline}}
+  - : Synonyme de `border-box`.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#masked {
+```css
+#masked {
   width: 100px;
   height: 100px;
   margin: 10px;
@@ -87,56 +87,45 @@ mask-origin: unset;
   -webkit-mask-origin: border-box; /* À modifier dans le résultat. */
   mask-origin: border-box; /* À modifier dans le résultat. */
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div id="masked"&gt;
-&lt;/div&gt;
-&lt;select id="origin"&gt;
-  &lt;option value="content-box"&gt;content-box&lt;/option&gt;
-  &lt;option value="padding-box"&gt;padding-box&lt;/option&gt;
-  &lt;option value="border-box" selected&gt;border-box&lt;/option&gt;
-  &lt;option value="margin-box"&gt;margin-box&lt;/option&gt;
-  &lt;option value="fill-box"&gt;fill-box&lt;/option&gt;
-  &lt;option value="stroke-box"&gt;stroke-box&lt;/option&gt;
-  &lt;option value="view-box"&gt;view-box&lt;/option&gt;
-&lt;/select&gt;
-</pre>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<pre class="brush: js">var origin = document.getElementById("origin");
+```
+
+### HTML
+
+```html
+<div id="masked">
+</div>
+<select id="origin">
+  <option value="content-box">content-box</option>
+  <option value="padding-box">padding-box</option>
+  <option value="border-box" selected>border-box</option>
+  <option value="margin-box">margin-box</option>
+  <option value="fill-box">fill-box</option>
+  <option value="stroke-box">stroke-box</option>
+  <option value="view-box">view-box</option>
+</select>
+```
+
+### JavaScript
+
+```js
+var origin = document.getElementById("origin");
 origin.addEventListener("change", function (evt) {
   document.getElementById("masked").style.maskOrigin = evt.target.value;
 });
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 160, 200)}}</p>
+{{EmbedLiveSample("Exemples", 160, 200)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<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("CSS Masks", "#the-mask-origin", "mask-origin")}}</td>
-   <td>{{Spec2("CSS Masks")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | État                         | Commentaires         |
+| -------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS Masks", "#the-mask-origin", "mask-origin")}} | {{Spec2("CSS Masks")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.mask-origin")}}</p>
+{{Compat("css.properties.mask-origin")}}