Small fixes and updates for fr CSS pages (#3476)

* Fix markdown, macros, small updates pt. 1

* Fix missed xref macros in font-style

* minor updates or typos

Co-authored-by: julieng <julien.gattelier@gmail.com>

1 files changed, 39 insertions, 152 deletions

diff --git a/files/fr/web/css/border-left-style/index.md b/files/fr/web/css/border-left-style/index.md
index 1f09e7474f..06b3b17f5d 100644
--- a/files/fr/web/css/border-left-style/index.md
+++ b/files/fr/web/css/border-left-style/index.md
@@ -1,15 +1,12 @@
 ---
 title: border-left-style
 slug: Web/CSS/border-left-style
-tags:
-  - CSS
-  - Propriété
-  - Reference
 translation_of: Web/CSS/border-left-style
+browser-compat: css.properties.border-left-style
 ---
 {{CSSRef}}
 
-La propriété** `border-left-style`** définit le style de ligne utilisé pour mettre en forme la bordure sur le côté gauche d'une boîte.
+La propriété **`border-left-style`** définit le style de ligne utilisé pour mettre en forme la bordure sur le côté gauche d'une boîte.
 
 {{EmbedInteractiveExample("pages/css/border-left-style.html")}}
 
@@ -33,142 +30,21 @@ border-left-style: outset;
 /* Valeurs globales */
 border-left-style: inherit;
 border-left-style: initial;
+border-left-style: revert;
 border-left-style: unset;
 ```
 
-### Valeurs
-
-- `<br-style>`
-
-  - : Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté gauche. Il peut prendre l'une des valeurs suivantes :
-
-    <table class="standard-table">
-      <tbody>
-        <tr>
-          <td><code>none</code></td>
-          <td>
-            L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure
-            n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est
-            définie, la valeur calculée de
-            {{cssxref("border-left-width")}} sera <code>0</code>, même
-            si cette dernière indique une autre valeur. Lorsqu'utilisée sur une
-            cellule d'un tableau avec la fusion des bordures, <code>none</code> a la
-            priorité la plus basse donc si une autre bordure est définie et fusionne
-            avec celle-ci, elle sera  affichée.
-          </td>
-        </tr>
-        <tr>
-          <td><code>hidden</code></td>
-          <td>
-            L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure
-            n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est
-            définie, la valeur calculée de
-            {{cssxref("border-left-width")}} sera <code>0</code>, même
-            si cette dernière indique une autre valeur. Lorsqu'utilisée sur une
-            cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a
-            la plus haute priorité et donc si une autre bordure est définie et
-            fusionne avec celle-ci, aucune ne sera  affichée.
-          </td>
-        </tr>
-        <tr>
-          <td><code>dotted</code></td>
-          <td>
-            Affiche une série de points ronds. L'espace entre ces points n'est pas
-            défini par la spécification et est donc laissé à l'implémentation. Le
-            rayon des points correspond à la moitié de
-            {{cssxref("border-left-width")}}.
-          </td>
-        </tr>
-        <tr>
-          <td><code>dashed</code></td>
-          <td>
-            Affiche une série de tirets. La taille de ces tirets n'est pas définie
-            par la spécification et est laissée à l'implémentation.
-          </td>
-        </tr>
-        <tr>
-          <td><code>solid</code></td>
-          <td>Affiche une ligne droite continue.</td>
-        </tr>
-        <tr>
-          <td><code>double</code></td>
-          <td>
-            Deux lignes droites sont affichées dont la somme des épaisseurs
-            correspond à la valeur fournie par {{cssxref("border-width")}}
-            ou {{cssxref("border-left-width")}}.
-          </td>
-        </tr>
-        <tr>
-          <td><code>groove</code></td>
-          <td>
-            La bordure crée un effet 3D donnant l'impression qu'elle a été gravée
-            dans le document. On obtient un effet opposé à <code>ridge</code>.
-          </td>
-        </tr>
-        <tr>
-          <td><code>ridge</code></td>
-          <td>
-            La bordure crée un effet 3D donnant l'impression que la bordure ressort
-            du document. L'effet obtenu est opposé à celui obtenu avec
-            <code>groove</code>.
-          </td>
-        </tr>
-        <tr>
-          <td><code>inset</code></td>
-          <td>
-            La bordure crée un effet 3D qui donne l'impression que la boîte est
-            renfoncée dans le document (l'effet obtenu est opposé à celui obtenu
-            avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de
-            tableau et que {{cssxref("border-collapse")}} vaut
-            <code>collapsed</code>, cette valeur se comporte comme
-            <code>groove</code>.
-          </td>
-        </tr>
-        <tr>
-          <td><code>outset</code></td>
-          <td>
-            <p>
-              La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est
-              opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule
-              de tableau avec {{cssxref("border-collapse")}} qui vaut
-              <code>collapsed</code>, cette valeur se comporte comme
-              <code>ridge</code>.
-            </p>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-
-### Syntaxe formelle
+La propriété `border-left-style` se définit avec l'un des mots-clés utilisés par la propriété [`border-style`](/fr/docs/Web/CSS/border-style).
 
-{{csssyntax}}
+## Définition formelle
 
-## Exemples
+{{CSSInfo}}
 
-### CSS
+## Syntaxe formelle
 
-```css
-/* On applique un style sur le tableau */
-table {
-  border-width: 2px;
-  background-color: #52E385;
-}
-tr, td {
-  padding: 3px;
-}
+{{csssyntax}}
 
-/* Des exemples pour border-left-style */
-.b1 {border-left-style:none;}
-.b2 {border-left-style:hidden;}
-.b3 {border-left-style:dotted;}
-.b4 {border-left-style:dashed;}
-.b5 {border-left-style:solid;}
-.b6 {border-left-style:double;}
-.b7 {border-left-style:groove;}
-.b8 {border-left-style:ridge;}
-.b9 {border-left-style:inset;}
-.b10 {border-left-style:outset;}
-```
+## Exemples
 
 ### HTML
 
@@ -193,34 +69,45 @@ tr, td {
 </table>
 ```
 
+### CSS
+
+```css
+/* On applique un style sur le tableau */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* Des exemples pour border-left-style */
+.b1 {border-left-style: none;}
+.b2 {border-left-style: hidden;}
+.b3 {border-left-style: dotted;}
+.b4 {border-left-style: dashed;}
+.b5 {border-left-style: solid;}
+.b6 {border-left-style: double;}
+.b7 {border-left-style: groove;}
+.b8 {border-left-style: ridge;}
+.b9 {border-left-style: inset;}
+.b10 {border-left-style: outset;}
+```
+
 ### Résultat
 
-{{EmbedLiveSample('Exemples', 300, 200)}}
+{{EmbedLiveSample('', 300, 200)}}
 
 ## Spécifications
 
-| Spécification                                                                                            | État                                     | Commentaires                       |
-| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------- |
-| {{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-left-style')}}     | {{Spec2('CSS3 Backgrounds')}} | Aucune modification significative. |
-| {{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-left-style')}} | {{Spec2('CSS2.1')}}                 | Définition initiale.               |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.border-left-style")}}
+{{Compat}}
 
 ## Voir aussi
 
-- Les autres propriétés liées au style des bordures :
-
-  - {{cssxref("border-right-style")}}
-  - {{cssxref("border-top-style")}}
-  - {{cssxref("border-bottom-style")}}
-  - {{cssxref("border-style")}}.
-
-- Les autres propriétés liées à la bordure gauche :
+- Les autres propriétés liées au style des bordures&nbsp;: [`border-right-style`](/fr/docs/Web/CSS/border-right-style), [`border-top-style`](/fr/docs/Web/CSS/border-top-style), [`border-bottom-style`](/fr/docs/Web/CSS/border-bottom-style), [`border-style`](/fr/docs/Web/CSS/border-style).
 
-  - {{cssxref("border-left")}}
-  - {{cssxref("border-left-color")}}
-  - {{cssxref("border-left-width")}}.
+- Les autres propriétés liées à la bordure gauche&nbsp;: [`border-left`](/fr/docs/Web/CSS/border-left), [`border-left-color`](/fr/docs/Web/CSS/border-left-color), [`border-left-width`](/fr/docs/Web/CSS/border-left-width).