convert content to md

1 files changed, 97 insertions, 149 deletions

diff --git a/files/fr/web/css/break-before/index.md b/files/fr/web/css/break-before/index.md
index 7ea0446d08..b757c6a076 100644
--- a/files/fr/web/css/break-before/index.md
+++ b/files/fr/web/css/break-before/index.md
@@ -7,11 +7,12 @@ tags:
   - Reference
 translation_of: Web/CSS/break-before
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété<strong> <code>break-before</code></strong> décrit la façon dont la page, la colonne ou la région se fragmente avant la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.</p>
+La propriété** `break-before`** décrit la façon dont la page, la colonne ou la région se fragmente avant la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.
 
-<pre class="brush:css no-line-numbers">/* Valeurs de rupture génériques */
+```css
+/* Valeurs de rupture génériques */
 break-before: auto;
 break-before: avoid;
 break-before: always;
@@ -37,121 +38,87 @@ break-before: region;
 break-before: inherit;
 break-before: initial;
 break-before: unset;
-</pre>
+```
 
-<p>Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de {{cssxref("break-after")}} de l'élément précédent, la valeur de {{cssxref("break-before")}} de l'élément suivant et la valeur de <code>break-inside</code> de l'élément englobant.</p>
+Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de {{cssxref("break-after")}} de l'élément précédent, la valeur de {{cssxref("break-before")}} de l'élément suivant et la valeur de `break-inside` de l'élément englobant.
 
-<p>Pour déterminer si on a une rupture, on applique les règles suivantes :</p>
+Pour déterminer si on a une rupture, on applique les règles suivantes :
 
-<ol>
- <li>Si l'une des trois valeurs correspond à une rupture forcée (<code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code> ou <code>region</code>), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, {{cssxref("break-before")}} l'emporte sur {{cssxref("break-after")}} qui l'emporte sur {{cssxref("break-inside")}}).</li>
- <li>Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (<code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code>, <code>avoid-column</code>), aucune rupture ne sera appliquée à cet endroit.</li>
-</ol>
+1.  Si l'une des trois valeurs correspond à une rupture forcée (`always`, `left`, `right`, `page`, `column` ou `region`), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, {{cssxref("break-before")}} l'emporte sur {{cssxref("break-after")}} qui l'emporte sur {{cssxref("break-inside")}}).
+2.  Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (`avoid`, `avoid-page`, `avoid-region`, `avoid-column`), aucune rupture ne sera appliquée à cet endroit.
 
-<p>Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.</p>
+Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La propriété <code>break-before</code> se paramètre avec un des mots-clés définis ci-après.</p>
+La propriété `break-before` se paramètre avec un des mots-clés définis ci-après.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<h4 id="Valeurs_de_rupture_génériques">Valeurs de rupture génériques</h4>
+#### Valeurs de rupture génériques
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Valeur initiale qui ne force ni n'interdit de rupture (de page, de colonne ou de région) avant la boîte.</dd>
- <dt><code>all</code>{{experimental_inline}}</dt>
- <dd>Force la rupture juste avant la boîte principale. La rupture a lieu pour l'ensemble des contextes de fragmentation. Ainsi si l'élément concerné est dans un conteneur multi-colonnes dans un média paginé, il y aura une rupture de colonne et une rupture de page.</dd>
- <dt><code>always</code>{{experimental_inline}}</dt>
- <dd>Force la rupture juste avant la boîte principale. Le type de rupture dépend du contexte de fragmentation englobant l'élément. Si l'élément est situé dans un conteneur multi-colonne, une rupture de colonne sera ajoutée. Si l'élément est situé dans un média paginé (mais pas dans un conteneur multi-colonnes), la rupture introduite sera une rupture de page.</dd>
- <dt><code>avoid</code></dt>
- <dd>Empêche toute rupture (de page, de colonne ou de région) avant la boîte.</dd>
-</dl>
+- `auto`
+  - : Valeur initiale qui ne force ni n'interdit de rupture (de page, de colonne ou de région) avant la boîte.
+- `all`{{experimental_inline}}
+  - : Force la rupture juste avant la boîte principale. La rupture a lieu pour l'ensemble des contextes de fragmentation. Ainsi si l'élément concerné est dans un conteneur multi-colonnes dans un média paginé, il y aura une rupture de colonne et une rupture de page.
+- `always`{{experimental_inline}}
+  - : Force la rupture juste avant la boîte principale. Le type de rupture dépend du contexte de fragmentation englobant l'élément. Si l'élément est situé dans un conteneur multi-colonne, une rupture de colonne sera ajoutée. Si l'élément est situé dans un média paginé (mais pas dans un conteneur multi-colonnes), la rupture introduite sera une rupture de page.
+- `avoid`
+  - : Empêche toute rupture (de page, de colonne ou de région) avant la boîte.
 
-<h4 id="Valeurs_de_rupture_liées_aux_médias_paginés">Valeurs de rupture liées aux médias paginés</h4>
+#### Valeurs de rupture liées aux médias paginés
 
-<dl>
- <dt><code>avoid-page</code></dt>
- <dd>Empêche toute saut de page avant la boîte de l'élément.</dd>
- <dt><code>page</code></dt>
- <dd>Force un saut de page avant la boîte de l'élément</dd>
- <dt><code>left</code></dt>
- <dd>Force un ou deux saut de page avant la boîte de l'élément afin que la prochaine page soit une page gauche.</dd>
- <dt><code>recto</code> {{experimental_inline}}</dt>
- <dd>Force un ou deux sauts de page avant la boîte de l'élément afin que la prochaine page soit une page recto (une page droite pour le sens de lecture gauche à droite et une page gauche pour le sens de lecture droite à gauche).</dd>
- <dt><code>right</code></dt>
- <dd>Force un ou deux saut de page avant la boîte de l'élément afin que la prochaine page soit une page droite.</dd>
- <dt><code>verso</code>{{experimental_inline}}</dt>
- <dd>Force un ou deux sauts de page avant la boîte de l'élément afin que la prochaine page soit une page verso (une page gauche pour le sens de lecture gauche à droite et une page droite pour le sens de lecture droite à gauche).</dd>
-</dl>
+- `avoid-page`
+  - : Empêche toute saut de page avant la boîte de l'élément.
+- `page`
+  - : Force un saut de page avant la boîte de l'élément
+- `left`
+  - : Force un ou deux saut de page avant la boîte de l'élément afin que la prochaine page soit une page gauche.
+- `recto` {{experimental_inline}}
+  - : Force un ou deux sauts de page avant la boîte de l'élément afin que la prochaine page soit une page recto (une page droite pour le sens de lecture gauche à droite et une page gauche pour le sens de lecture droite à gauche).
+- `right`
+  - : Force un ou deux saut de page avant la boîte de l'élément afin que la prochaine page soit une page droite.
+- `verso`{{experimental_inline}}
+  - : Force un ou deux sauts de page avant la boîte de l'élément afin que la prochaine page soit une page verso (une page gauche pour le sens de lecture gauche à droite et une page droite pour le sens de lecture droite à gauche).
 
-<h4 id="Valeurs_de_ruptures_relatives_aux_dispositions_en_colonnes">Valeurs de ruptures relatives aux dispositions en colonnes</h4>
+#### Valeurs de ruptures relatives aux dispositions en colonnes
 
-<dl>
- <dt><code>avoid-column</code></dt>
- <dd>Empêche toute rupture de colonne avant la boîte de l'élément.</dd>
- <dt><code>column</code></dt>
- <dd>Force une rupture de colonne de page avant la boîte de l'élément.</dd>
-</dl>
+- `avoid-column`
+  - : Empêche toute rupture de colonne avant la boîte de l'élément.
+- `column`
+  - : Force une rupture de colonne de page avant la boîte de l'élément.
 
-<h4 id="Valeurs_de_ruptures_relatives_aux_régions">Valeurs de ruptures relatives aux régions</h4>
+#### Valeurs de ruptures relatives aux régions
 
-<dl>
- <dt><code>region</code>{{experimental_inline}}</dt>
- <dd>Force une rupture de région avant la boîte de l'élément.</dd>
- <dt><code>avoid-region</code>{{experimental_inline}}</dt>
- <dd>Empêche toute rupture de région avant la boîte de l'élément.</dd>
-</dl>
+- `region`{{experimental_inline}}
+  - : Force une rupture de région avant la boîte de l'élément.
+- `avoid-region`{{experimental_inline}}
+  - : Empêche toute rupture de région avant la boîte de l'élément.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Aliassynonymes_pour_les_ruptures_de_page">Alias/synonymes pour les ruptures de page</h2>
-
-<p>Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-before")}} devrait être considérée par les navigateurs comme un synonyme de <code>break-before</code>. Cela permet aux sites utilisant <code>page-break-before</code> de continuer à fonctionner comme précédemment. Voici un sous-ensemble des valeurs avec leurs alias :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col"><code>page-break-before</code></th>
-   <th scope="col"><code>break-before</code></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>auto</code></td>
-   <td><code>auto</code></td>
-  </tr>
-  <tr>
-   <td><code>left</code></td>
-   <td><code>left</code></td>
-  </tr>
-  <tr>
-   <td><code>right</code></td>
-   <td><code>right</code></td>
-  </tr>
-  <tr>
-   <td><code>avoid</code></td>
-   <td><code>avoid</code></td>
-  </tr>
-  <tr>
-   <td><code>always</code></td>
-   <td><code>page</code></td>
-  </tr>
- </tbody>
-</table>
-
-<div class="note">
-<p><strong>Note :</strong> La valeur <code>always</code> pour <code>page-break-before</code> a été implémentée par les navigateurs comme une rupture de page et non comme une rupture de colonne. C'est pourquoi l'alias ici utilisé est <code>page</code> et non <code>always</code>.</p>
-</div>
+## Alias/synonymes pour les ruptures de page
+
+Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-before")}} devrait être considérée par les navigateurs comme un synonyme de `break-before`. Cela permet aux sites utilisant `page-break-before` de continuer à fonctionner comme précédemment. Voici un sous-ensemble des valeurs avec leurs alias :
+
+| `page-break-before` | `break-before` |
+| ------------------- | -------------- |
+| `auto`              | `auto`         |
+| `left`              | `left`         |
+| `right`             | `right`        |
+| `avoid`             | `avoid`        |
+| `always`            | `page`         |
+
+> **Note :** La valeur `always` pour `page-break-before` a été implémentée par les navigateurs comme une rupture de page et non comme une rupture de colonne. C'est pourquoi l'alias ici utilisé est `page` et non `always`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   -webkit-column-count: 4;
   -moz-column-count: 4;
   column-count: 4;
@@ -164,64 +131,45 @@ p {
   /* Pour WebKit : */
   -webkit-column-break-before: avoid;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="exemple"&gt;
-  &lt;p&gt;« Mais alors, » pensa Alice, « ne serai-je donc
+```html
+<div class="exemple">
+  <p>« Mais alors, » pensa Alice, « ne serai-je donc
   jamais plus vieille que je ne le suis maintenant ?
   D’un côté cela aura ses avantages, ne jamais être
   une vieille femme. Mais alors avoir toujours des
   leçons à apprendre ! Oh, je n’aimerais pas cela du
-  tout. »&lt;/p&gt;
-  &lt;p&gt;« Oh ! Alice, petite folle, » se répondit-elle.
+  tout. »</p>
+  <p>« Oh ! Alice, petite folle, » se répondit-elle.
   « Comment pourriez-vous apprendre des leçons ici ?
   Il y a à peine de la place pour vous, et il n’y en
-  a pas du tout pour vos livres de leçons. »&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","400","300")}}</p>
-
-<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 Fragmentation', '#break-between', 'break-before')}}</td>
-   <td>{{Spec2('CSS3 Fragmentation')}}</td>
-   <td>Ajouts des mots-clés <code>recto</code> et <code>verso</code>. Le type de média pour cette propriété est passé de <code>paged</code> à <code>visual</code>. L'algorithme de rupture est précisé afin de gérer les différents types de rupture.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-before')}}</td>
-   <td>{{Spec2('CSS3 Regions')}}</td>
-   <td>La spécification étend la propriété pour gérer les sauts de région. Les mots-clés <code>avoid-region</code> et <code>region</code> sont ajoutés.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-before')}}</td>
-   <td>{{Spec2('CSS3 Multicol')}}</td>
-   <td>Définition initiale. La spécification étend la propriété {{cssxref("page-break-before")}} de  CSS 2.1 afin de gérer les sauts de page ou de colonne.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<h3 id="Prise_en_charge_pour_une_disposition_multi-colonnes">Prise en charge pour une disposition multi-colonnes</h3>
-
-<p>{{Compat("css.properties.break-before.multicol_context")}}</p>
-
-<h3 id="Prise_en_charge_pour_les_média_paginés">Prise en charge pour les média paginés</h3>
-
-<p>{{Compat("css.properties.break-before.paged_context")}}</p>
+  a pas du tout pour vos livres de leçons. »</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","400","300")}}
+
+## Spécifications
+
+| Spécification                                                                                                        | État                                     | Commentaires                                                                                                                                                                                       |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Fragmentation', '#break-between', 'break-before')}}                         | {{Spec2('CSS3 Fragmentation')}} | Ajouts des mots-clés `recto` et `verso`. Le type de média pour cette propriété est passé de `paged` à `visual`. L'algorithme de rupture est précisé afin de gérer les différents types de rupture. |
+| {{SpecName('CSS3 Regions', '#region-flow-break', 'break-before')}}                             | {{Spec2('CSS3 Regions')}}         | La spécification étend la propriété pour gérer les sauts de région. Les mots-clés `avoid-region` et `region` sont ajoutés.                                                                         |
+| {{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-before')}} | {{Spec2('CSS3 Multicol')}}     | Définition initiale. La spécification étend la propriété {{cssxref("page-break-before")}} de  CSS 2.1 afin de gérer les sauts de page ou de colonne.                                   |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+### Prise en charge pour une disposition multi-colonnes
+
+{{Compat("css.properties.break-before.multicol_context")}}
+
+### Prise en charge pour les média paginés
+
+{{Compat("css.properties.break-before.paged_context")}}