From 23ea74fe6c9184a71441ee99828b044fca5cce49 Mon Sep 17 00:00:00 2001
From: "Queen Vinyl Da.i'gyu-Kazotetsu" <vinyldarkscratch@gmail.com>
Date: Wed, 26 Jul 2023 23:44:28 -0700
Subject: [PATCH] fr: Format /web/css using Prettier (part 4) (#14629)

* fr: Format /web/css using Prettier (part 4)

* Undo .prettierignore changes
---
 files/fr/web/css/border-left-style/index.md   |  45 ++-
 files/fr/web/css/border-left-width/index.md   |  18 +-
 files/fr/web/css/border-left/index.md         |  11 +-
 files/fr/web/css/border-radius/index.md       |  12 +-
 files/fr/web/css/border-right-color/index.md  |   7 +-
 files/fr/web/css/border-right-style/index.md  |  45 ++-
 files/fr/web/css/border-right-width/index.md  |  18 +-
 files/fr/web/css/border-right/index.md        |  11 +-
 .../css/border-start-start-radius/index.md    |  14 +-
 files/fr/web/css/border-style/index.md        |   4 +-
 files/fr/web/css/border-top-color/index.md    |   7 +-
 .../web/css/border-top-left-radius/index.md   |   8 +-
 .../web/css/border-top-right-radius/index.md  |   8 +-
 files/fr/web/css/border-top-style/index.md    |  45 ++-
 files/fr/web/css/border-top-width/index.md    |  18 +-
 files/fr/web/css/border-top/index.md          |   3 +-
 files/fr/web/css/border-width/index.md        |  19 +-
 files/fr/web/css/border/index.md              |   7 +-
 files/fr/web/css/bottom/index.md              |  26 +-
 files/fr/web/css/box-align/index.md           |   2 +-
 .../fr/web/css/box-decoration-break/index.md  |  18 +-
 files/fr/web/css/box-direction/index.md       |   4 +-
 files/fr/web/css/box-orient/index.md          |  16 +-
 files/fr/web/css/box-pack/index.md            |   4 +-
 files/fr/web/css/box-shadow/index.md          |  10 +-
 files/fr/web/css/box-sizing/index.md          |   2 +-
 files/fr/web/css/break-after/index.md         |  21 +-
 files/fr/web/css/break-before/index.md        |  29 +-
 files/fr/web/css/break-inside/index.md        |  21 +-
 files/fr/web/css/calc/index.md                |   6 +-
 files/fr/web/css/caption-side/index.md        |  10 +-
 files/fr/web/css/cascade/index.md             |  84 ++---
 files/fr/web/css/child_combinator/index.md    |   5 +-
 files/fr/web/css/clamp/index.md               |   4 +-
 files/fr/web/css/class_selectors/index.md     |   7 +-
 files/fr/web/css/clear/index.md               |  55 ++--
 files/fr/web/css/clip-path/index.md           |   5 +-
 files/fr/web/css/clip/index.md                |  14 +-
 files/fr/web/css/color/index.md               |  22 +-
 files/fr/web/css/color_value/index.md         |  28 +-
 files/fr/web/css/column-count/index.md        |  18 +-
 files/fr/web/css/column-fill/index.md         |  18 +-
 files/fr/web/css/column-gap/index.md          |   5 +-
 files/fr/web/css/column-rule-color/index.md   |  18 +-
 files/fr/web/css/column-rule-style/index.md   |  20 +-
 files/fr/web/css/column-rule-width/index.md   |  20 +-
 files/fr/web/css/column-rule/index.md         |   8 +-
 files/fr/web/css/column-span/index.md         |  21 +-
 files/fr/web/css/column-width/index.md        |   7 +-
 files/fr/web/css/column_combinator/index.md   |  16 +-
 files/fr/web/css/columns/index.md             |  19 +-
 files/fr/web/css/comments/index.md            |   1 -
 files/fr/web/css/containing_block/index.md    |  36 +--
 files/fr/web/css/content/index.md             |  42 ++-
 files/fr/web/css/counter/index.md             |  10 +-
 files/fr/web/css/counters/index.md            |  76 ++---
 files/fr/web/css/cross-fade/index.md          |  18 +-
 files/fr/web/css/css_animations/tips/index.md |  34 ++-
 .../using_css_animations/index.md             |  42 +--
 .../resizing_background_images/index.md       |   3 +-
 .../using_multiple_backgrounds/index.md       |  10 +-
 .../mastering_margin_collapsing/index.md      |  26 +-
 .../css/css_colors/applying_color/index.md    |  54 ++--
 .../using_css_counters/index.md               |  14 +-
 .../typical_use_cases_of_flexbox/index.md     |   2 +-
 .../index.md                                  |   2 +-
 files/fr/web/css/css_fonts/index.md           |   8 +-
 .../css_fonts/opentype_fonts_guide/index.md   |  14 +-
 .../css_fonts/variable_fonts_guide/index.md   |  70 ++---
 .../auto-placement_in_grid_layout/index.md    | 110 ++++---
 .../basic_concepts_of_grid_layout/index.md    |  27 +-
 .../box_alignment_in_grid_layout/index.md     |  48 ++-
 .../grid_layout_and_accessibility/index.md    |   4 +-
 .../index.md                                  | 123 +++++---
 .../index.md                                  |  82 +++--
 .../index.md                                  |  66 ++--
 .../grid_template_areas/index.md              |  57 ++--
 .../index.md                                  |  56 +++-
 files/fr/web/css/css_grid_layout/index.md     |   8 +-
 .../index.md                                  | 202 +++++++-----
 .../index.md                                  |  69 +++--
 .../index.md                                  |   2 +-
 .../css_images/using_css_gradients/index.md   | 288 ++++++++++++------
 .../consistent_list_indentation/index.md      |   3 +-
 .../floating_and_positioning/index.md         |  32 +-
 .../margins_borders_padding/index.md          |  86 +++---
 .../sizing/index.md                           |  16 +-
 .../using_media_queries/index.md              |  62 ++--
 .../index.md                                  |   8 +-
 .../using_multicol_layouts/index.md           |  61 ++--
 .../stacking_context/index.md                 |  40 ++-
 .../stacking_context_example_1/index.md       |  25 +-
 .../stacking_context_example_2/index.md       |  25 +-
 .../stacking_context_example_3/index.md       |  10 +-
 .../stacking_floating_elements/index.md       |  15 +-
 .../stacking_without_z-index/index.md         |  15 +-
 .../using_z-index/index.md                    |  15 +-
 .../web/css/css_scrollbars_styling/index.md   |   8 +-
 .../index.md                                  |   8 +-
 99 files changed, 1684 insertions(+), 1212 deletions(-)

diff --git a/files/fr/web/css/border-left-style/index.md b/files/fr/web/css/border-left-style/index.md
index 566deff9166daf..b32887c45056ab 100644
--- a/files/fr/web/css/border-left-style/index.md
+++ b/files/fr/web/css/border-left-style/index.md
@@ -75,23 +75,44 @@ La propriété `border-left-style` se définit avec l'un des mots-clés utilisé
 /* On applique un style sur le tableau */
 table {
   border-width: 2px;
-  background-color: #52E385;
+  background-color: #52e385;
 }
-tr, td {
+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;}
+.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
diff --git a/files/fr/web/css/border-left-width/index.md b/files/fr/web/css/border-left-width/index.md
index 3919851276f153..0ba5fbeec95361 100644
--- a/files/fr/web/css/border-left-width/index.md
+++ b/files/fr/web/css/border-left-width/index.md
@@ -55,17 +55,17 @@ border-left-width: unset;
 ### CSS
 
 ```css
-.element1{
+.element1 {
   border-left-width: thick;
   border-left-style: solid;
   border-left-color: red;
 }
-.element2{
+.element2 {
   border-left-width: medium;
   border-left-style: solid;
   border-left-color: orange;
 }
-.element3{
+.element3 {
   border-left-width: thin;
   border-left-style: solid;
   border-left-color: green;
@@ -75,17 +75,11 @@ border-left-width: unset;
 ### HTML
 
 ```html
-<p class="element1">
-  Une bordure épaisse rouge.
-</p>
+<p class="element1">Une bordure épaisse rouge.</p>
 
-<p class="element2">
-  Une bordure moyenne orange.
-</p>
+<p class="element2">Une bordure moyenne orange.</p>
 
-<p class="element3">
-  Et une bordure fine verte.
-</p>
+<p class="element3">Et une bordure fine verte.</p>
 ```
 
 ### Résultat
diff --git a/files/fr/web/css/border-left/index.md b/files/fr/web/css/border-left/index.md
index 9a029a5b566a30..517f27ebdb42d9 100644
--- a/files/fr/web/css/border-left/index.md
+++ b/files/fr/web/css/border-left/index.md
@@ -23,15 +23,15 @@ Ces propriétés permettent de décrire la bordure du côté gauche d'un éléme
 > Comme pour les autres propriétés raccourcies, `border-left` définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si celles-ci ne sont pas indiquées. Pour les valeurs qui ne sont pas indiquées, on prendra les valeurs par défaut. Ainsi :
 >
 > ```css
->   border-left-style: dotted;
->   border-left: thick green;
+> border-left-style: dotted;
+> border-left: thick green;
 > ```
 >
 > est équivalent à :
 >
 > ```css
->   border-left-style: dotted;
->   border-left: none thick green;
+> border-left-style: dotted;
+> border-left: none thick green;
 > ```
 >
 > et la valeur {{cssxref("border-left-style")}} fournie avant `border-left` est ignorée.
@@ -77,8 +77,7 @@ border-left: medium dashed green;
 
 ```html
 <p class="exemple">
-  En passant elle prit sur un rayon un pot
-  de confiture portant cette étiquette,
+  En passant elle prit sur un rayon un pot de confiture portant cette étiquette,
   « MARMELADE D’ORANGES. »
 </p>
 ```
diff --git a/files/fr/web/css/border-radius/index.md b/files/fr/web/css/border-radius/index.md
index 650f813eb0087c..a15fde0b5e487a 100644
--- a/files/fr/web/css/border-radius/index.md
+++ b/files/fr/web/css/border-radius/index.md
@@ -154,10 +154,10 @@ border-radius: 1em / 5em;
 
 /* est équivalent à : */
 
-border-top-left-radius:     1em 5em;
-border-top-right-radius:    1em 5em;
+border-top-left-radius: 1em 5em;
+border-top-right-radius: 1em 5em;
 border-bottom-right-radius: 1em 5em;
-border-bottom-left-radius:  1em 5em;
+border-bottom-left-radius: 1em 5em;
 ```
 
 ```css
@@ -165,10 +165,10 @@ border-radius: 4px 3px 6px / 2px 4px;
 
 /* est équivalent à : */
 
-border-top-left-radius:     4px 2px;
-border-top-right-radius:    3px 4px;
+border-top-left-radius: 4px 2px;
+border-top-right-radius: 3px 4px;
 border-bottom-right-radius: 6px 2px;
-border-bottom-left-radius:  3px 4px;
+border-bottom-left-radius: 3px 4px;
 ```
 
 ## Définition formelle
diff --git a/files/fr/web/css/border-right-color/index.md b/files/fr/web/css/border-right-color/index.md
index ab049fa097f151..88e1573fc44e15 100644
--- a/files/fr/web/css/border-right-color/index.md
+++ b/files/fr/web/css/border-right-color/index.md
@@ -60,9 +60,10 @@ border-right-color: unset;
 
 ```html
 <div class="maboite">
-  <p>Une boîte avec une bordure autour.
-     Notez le côté de la boîte qui est
-     <span class="texterouge">rouge</span>.</p>
+  <p>
+    Une boîte avec une bordure autour. Notez le côté de la boîte qui est
+    <span class="texterouge">rouge</span>.
+  </p>
 </div>
 ```
 
diff --git a/files/fr/web/css/border-right-style/index.md b/files/fr/web/css/border-right-style/index.md
index 106238b0702d1d..345c7b6f04d644 100644
--- a/files/fr/web/css/border-right-style/index.md
+++ b/files/fr/web/css/border-right-style/index.md
@@ -75,23 +75,44 @@ La propriété `border-right-style` se définit avec l'un des mots-clés utilis
 /* On applique un style sur le tableau */
 table {
   border-width: 2px;
-  background-color: #52E385;
+  background-color: #52e385;
 }
-tr, td {
+tr,
+td {
   padding: 3px;
 }
 
 /* Des exemples pour border-right-style */
-.b1 {border-right-style: none;}
-.b2 {border-right-style: hidden;}
-.b3 {border-right-style: dotted;}
-.b4 {border-right-style: dashed;}
-.b5 {border-right-style: solid;}
-.b6 {border-right-style: double;}
-.b7 {border-right-style: groove;}
-.b8 {border-right-style: ridge;}
-.b9 {border-right-style: inset;}
-.b10 {border-right-style: outset;}
+.b1 {
+  border-right-style: none;
+}
+.b2 {
+  border-right-style: hidden;
+}
+.b3 {
+  border-right-style: dotted;
+}
+.b4 {
+  border-right-style: dashed;
+}
+.b5 {
+  border-right-style: solid;
+}
+.b6 {
+  border-right-style: double;
+}
+.b7 {
+  border-right-style: groove;
+}
+.b8 {
+  border-right-style: ridge;
+}
+.b9 {
+  border-right-style: inset;
+}
+.b10 {
+  border-right-style: outset;
+}
 ```
 
 ### Résultat
diff --git a/files/fr/web/css/border-right-width/index.md b/files/fr/web/css/border-right-width/index.md
index 36ae5b7d5d5a6e..0d28591e3568a2 100644
--- a/files/fr/web/css/border-right-width/index.md
+++ b/files/fr/web/css/border-right-width/index.md
@@ -55,13 +55,13 @@ border-right-width: unset;
 ### CSS
 
 ```css
-.element1{
+.element1 {
   border-right: thick solid red;
 }
-.element2{
+.element2 {
   border-right: medium solid orange;
 }
-.element3{
+.element3 {
   border-right: thin solid green;
 }
 ```
@@ -69,17 +69,11 @@ border-right-width: unset;
 ### HTML
 
 ```html
-<p class="element1">
-  Une bordure épaisse rouge.
-</p>
+<p class="element1">Une bordure épaisse rouge.</p>
 
-<p class="element2">
-  Une bordure moyenne orange.
-</p>
+<p class="element2">Une bordure moyenne orange.</p>
 
-<p class="element3">
-  Et une bordure fine verte.
-</p>
+<p class="element3">Et une bordure fine verte.</p>
 ```
 
 ### Résultat
diff --git a/files/fr/web/css/border-right/index.md b/files/fr/web/css/border-right/index.md
index b59bf951da1f24..073f77d17ccbd1 100644
--- a/files/fr/web/css/border-right/index.md
+++ b/files/fr/web/css/border-right/index.md
@@ -23,15 +23,15 @@ Ces propriétés permettent de décrire la bordure du côté droit d'un élémen
 > Comme pour les autres propriétés raccourcies, `border-right` définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si celles-ci ne sont pas indiquées. Pour les valeurs qui ne sont pas indiquées, on prendra les valeurs par défaut. Ainsi :
 >
 > ```css
->   border-right-style: dotted;
->   border-right: thick green;
+> border-right-style: dotted;
+> border-right: thick green;
 > ```
 >
 > est équivalent à :
 >
 > ```css
->   border-right-style: dotted;
->   border-right: none thick green;
+> border-right-style: dotted;
+> border-right: none thick green;
 > ```
 >
 > et la valeur {{cssxref("border-right-style")}} fournie avant `border-right` est ignorée.
@@ -77,8 +77,7 @@ border-right: medium dashed green;
 
 ```html
 <p class="exemple">
-  En passant elle prit sur un rayon un pot
-  de confiture portant cette étiquette,
+  En passant elle prit sur un rayon un pot de confiture portant cette étiquette,
   « MARMELADE D’ORANGES. »
 </p>
 ```
diff --git a/files/fr/web/css/border-start-start-radius/index.md b/files/fr/web/css/border-start-start-radius/index.md
index 53a7285c6c433b..c8af6b5fb53d87 100644
--- a/files/fr/web/css/border-start-start-radius/index.md
+++ b/files/fr/web/css/border-start-start-radius/index.md
@@ -43,16 +43,16 @@ Ainsi, avec un mode d'écriture `horizontal-tb`, cette propriété logique corre
 
 ```css
 div {
-background-color: rebeccapurple;
-width: 120px;
-height: 120px;
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
   border-start-start-radius: 10px;
 }
 
 .texteExemple {
-writing-mode: vertical-rl;
-padding: 10px;
-background-color: #fff;
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
   border-start-start-radius: 10px;
 }
 ```
@@ -61,7 +61,7 @@ background-color: #fff;
 
 ```html
 <div>
-<p class="texteExemple">Exemple</p>
+  <p class="texteExemple">Exemple</p>
 </div>
 ```
 
diff --git a/files/fr/web/css/border-style/index.md b/files/fr/web/css/border-style/index.md
index 0e736b725e6f21..f14e2ed357069f 100644
--- a/files/fr/web/css/border-style/index.md
+++ b/files/fr/web/css/border-style/index.md
@@ -68,9 +68,9 @@ Chacune des valeurs peut être un des mots-clés parmi la liste suivante.
   - : Un mot-clé qui décrit le style utilisé pour la bordure sur les côtés de la boîte. Ce mot-clé peut prendre l'une des valeurs suivantes&nbsp;:
 
     - `none`
-      - : L'effet obtenu est le même qu'avec `hidden`&nbsp;: aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie (avec [`background-image`](/fr/docs/Web/CSS/background-image)), la valeur calculée de [`border-width`](/fr/docs/Web/CSS/border-width) sera `0`, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, `none` a la priorité la plus *basse*&nbsp;; donc, si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée.
+      - : L'effet obtenu est le même qu'avec `hidden`&nbsp;: aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie (avec [`background-image`](/fr/docs/Web/CSS/background-image)), la valeur calculée de [`border-width`](/fr/docs/Web/CSS/border-width) sera `0`, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, `none` a la priorité la plus _basse_&nbsp;; donc, si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée.
     - `hidden`
-      - : L'effet obtenu est le même qu'avec `none`&nbsp;: aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie (avec [`background-image`](/fr/docs/Web/CSS/background-image)), la valeur calculée de [`border-width`](/fr/docs/Web/CSS/border-width) sera `0`, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, `hidden` a *la plus haute priorité* et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée.
+      - : L'effet obtenu est le même qu'avec `none`&nbsp;: aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie (avec [`background-image`](/fr/docs/Web/CSS/background-image)), la valeur calculée de [`border-width`](/fr/docs/Web/CSS/border-width) sera `0`, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, `hidden` a _la plus haute priorité_ et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée.
     - `dotted`
       - : 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 [`border-width`](/fr/docs/Web/CSS/border-width).
     - `dashed`
diff --git a/files/fr/web/css/border-top-color/index.md b/files/fr/web/css/border-top-color/index.md
index 3c00869560d478..b33fe107c661cb 100644
--- a/files/fr/web/css/border-top-color/index.md
+++ b/files/fr/web/css/border-top-color/index.md
@@ -62,9 +62,10 @@ border-top-color: unset;
 
 ```html
 <div class="maboite">
-  <p>Une boîte avec une bordure autour.
-     Notez le côté de la boîte qui est
-     <span class="texterouge">rouge</span>.</p>
+  <p>
+    Une boîte avec une bordure autour. Notez le côté de la boîte qui est
+    <span class="texterouge">rouge</span>.
+  </p>
 </div>
 ```
 
diff --git a/files/fr/web/css/border-top-left-radius/index.md b/files/fr/web/css/border-top-left-radius/index.md
index 908310749d4ffc..6680ae74945569 100644
--- a/files/fr/web/css/border-top-left-radius/index.md
+++ b/files/fr/web/css/border-top-left-radius/index.md
@@ -84,10 +84,10 @@ div {
 ### HTML
 
 ```html
- <div class="arc_cercle"></div>
- <div class="arc_ellipse"></div>
- <div class="pourcentage"></div>
- <div class="rognage"></div>
+<div class="arc_cercle"></div>
+<div class="arc_ellipse"></div>
+<div class="pourcentage"></div>
+<div class="rognage"></div>
 ```
 
 ### Résultat
diff --git a/files/fr/web/css/border-top-right-radius/index.md b/files/fr/web/css/border-top-right-radius/index.md
index c85ad3fefdc1e1..29d0c245e3ac3f 100644
--- a/files/fr/web/css/border-top-right-radius/index.md
+++ b/files/fr/web/css/border-top-right-radius/index.md
@@ -86,10 +86,10 @@ div {
 ### HTML
 
 ```html
- <div class="arc_cercle"></div>
- <div class="arc_ellipse"></div>
- <div class="pourcentage"></div>
- <div class="rognage"></div>
+<div class="arc_cercle"></div>
+<div class="arc_ellipse"></div>
+<div class="pourcentage"></div>
+<div class="rognage"></div>
 ```
 
 ### Résultat
diff --git a/files/fr/web/css/border-top-style/index.md b/files/fr/web/css/border-top-style/index.md
index 2ac88ee67add90..145209377ccfc9 100644
--- a/files/fr/web/css/border-top-style/index.md
+++ b/files/fr/web/css/border-top-style/index.md
@@ -75,23 +75,44 @@ La propriété `border-top-style` se définit avec l'un des mots-clés utilisés
 /* On applique un style sur le tableau */
 table {
   border-width: 2px;
-  background-color: #52E385;
+  background-color: #52e385;
 }
-tr, td {
+tr,
+td {
   padding: 3px;
 }
 
 /* Des exemples pour border-top-style */
-.b1 {border-top-style: none;}
-.b2 {border-top-style: hidden;}
-.b3 {border-top-style: dotted;}
-.b4 {border-top-style: dashed;}
-.b5 {border-top-style: solid;}
-.b6 {border-top-style: double;}
-.b7 {border-top-style: groove;}
-.b8 {border-top-style: ridge;}
-.b9 {border-top-style: inset;}
-.b10 {border-top-style: outset;}
+.b1 {
+  border-top-style: none;
+}
+.b2 {
+  border-top-style: hidden;
+}
+.b3 {
+  border-top-style: dotted;
+}
+.b4 {
+  border-top-style: dashed;
+}
+.b5 {
+  border-top-style: solid;
+}
+.b6 {
+  border-top-style: double;
+}
+.b7 {
+  border-top-style: groove;
+}
+.b8 {
+  border-top-style: ridge;
+}
+.b9 {
+  border-top-style: inset;
+}
+.b10 {
+  border-top-style: outset;
+}
 ```
 
 ### Résultat
diff --git a/files/fr/web/css/border-top-width/index.md b/files/fr/web/css/border-top-width/index.md
index f418a6c297589b..af81ef8b386c3c 100644
--- a/files/fr/web/css/border-top-width/index.md
+++ b/files/fr/web/css/border-top-width/index.md
@@ -55,13 +55,13 @@ border-top-width: unset;
 ### CSS
 
 ```css
-.element1{
+.element1 {
   border-top: thick solid red;
 }
-.element2{
+.element2 {
   border-top: medium solid orange;
 }
-.element3{
+.element3 {
   border-top: thin solid green;
 }
 ```
@@ -69,17 +69,11 @@ border-top-width: unset;
 ### HTML
 
 ```html
-<p class="element1">
-  Une bordure épaisse rouge.
-</p>
+<p class="element1">Une bordure épaisse rouge.</p>
 
-<p class="element2">
-  Une bordure moyenne orange.
-</p>
+<p class="element2">Une bordure moyenne orange.</p>
 
-<p class="element3">
-  Et une bordure fine verte.
-</p>
+<p class="element3">Et une bordure fine verte.</p>
 ```
 
 ### Résultat
diff --git a/files/fr/web/css/border-top/index.md b/files/fr/web/css/border-top/index.md
index 75ad4e5938f2fd..7e7deca00af967 100644
--- a/files/fr/web/css/border-top/index.md
+++ b/files/fr/web/css/border-top/index.md
@@ -77,8 +77,7 @@ Les valeurs de la propriété raccourcie peuvent être fournies dans n'importe q
 
 ```html
 <p class="exemple">
-  En passant elle prit sur un rayon un pot
-  de confiture portant cette étiquette,
+  En passant elle prit sur un rayon un pot de confiture portant cette étiquette,
   « MARMELADE D’ORANGES. »
 </p>
 ```
diff --git a/files/fr/web/css/border-width/index.md b/files/fr/web/css/border-width/index.md
index 7e83293acfb435..abc872799be89f 100644
--- a/files/fr/web/css/border-width/index.md
+++ b/files/fr/web/css/border-width/index.md
@@ -80,26 +80,21 @@ La propriété `border-width` peut être définie avec une, deux, trois ou quatr
 ### HTML
 
 ```html
-<p id="unevaleur">
-  Une valeur : la bordure fait 6px sur les 4 côtés.
-</p>
+<p id="unevaleur">Une valeur : la bordure fait 6px sur les 4 côtés.</p>
 
 <p id="deuxvaleurs">
-  Deux valeurs différentes : elle fait 2px en haut
-  et en bas et elle mesure 10px pour les bords droit
-  et gauche.
+  Deux valeurs différentes : elle fait 2px en haut et en bas et elle mesure 10px
+  pour les bords droit et gauche.
 </p>
 
 <p id="troisvaleurs">
-  Trois valeurs différentes : 0.3em pour le haut,
-  9px pour le bas et zéro pour la droite et la
-  gauche.
+  Trois valeurs différentes : 0.3em pour le haut, 9px pour le bas et zéro pour
+  la droite et la gauche.
 </p>
 
 <p id="quatrevaleurs">
-  Quatre valeurs différentes : "thin" pour le haut,
-  "medium" pour la droite, "thick" pour le bas
-  et 1em pour la gauche.
+  Quatre valeurs différentes : "thin" pour le haut, "medium" pour la droite,
+  "thick" pour le bas et 1em pour la gauche.
 </p>
 ```
 
diff --git a/files/fr/web/css/border/index.md b/files/fr/web/css/border/index.md
index 6ce74bbe01c584..dbaa45332970fd 100644
--- a/files/fr/web/css/border/index.md
+++ b/files/fr/web/css/border/index.md
@@ -73,7 +73,7 @@ La propriété `border` peut être définie grâce à une ou plusieurs valeurs [
 }
 style {
   border: 1px dashed black;
-  display:block;
+  display: block;
 }
 ```
 
@@ -81,10 +81,7 @@ style {
 
 ```html
 <div class="brd">Oh des bordures</div>
-<p>
-  N'hésitez pas à éditer le CSS qui suit pour voir
-  l'effet des valeurs.
-</p>
+<p>N'hésitez pas à éditer le CSS qui suit pour voir l'effet des valeurs.</p>
 <style contenteditable>
   .brd {
     border: 1px solid black;
diff --git a/files/fr/web/css/bottom/index.md b/files/fr/web/css/bottom/index.md
index 48eaa511645812..81ae8b791fb446 100644
--- a/files/fr/web/css/bottom/index.md
+++ b/files/fr/web/css/bottom/index.md
@@ -75,26 +75,26 @@ Dans l'exemple qui suit, on illustre la différence de comportement de la propri
 
 ```css
 p {
-  font-size:30px;
-  line-height:3em;
+  font-size: 30px;
+  line-height: 3em;
 }
 
 div.pos {
-  width:49%;
-  text-align:center;
-  border:2px solid #00f;
+  width: 49%;
+  text-align: center;
+  border: 2px solid #00f;
 }
 
 div#abs {
-  position:absolute;
-  bottom:0;
-  left:0;
+  position: absolute;
+  bottom: 0;
+  left: 0;
 }
 
 div#fix {
-  position:fixed;
-  bottom:0;
-  right:0;
+  position: fixed;
+  bottom: 0;
+  right: 0;
 }
 ```
 
@@ -102,8 +102,8 @@ div#fix {
 
 ```html
 <p>
-  Voici <br>un<br>grand<br>grand,<br>grand,
-  <br>grand,<br>grand,<br>grand<br>contenu.
+  Voici <br />un<br />grand<br />grand,<br />grand,
+  <br />grand,<br />grand,<br />grand<br />contenu.
 </p>
 
 <div id="fix" class="pos">
diff --git a/files/fr/web/css/box-align/index.md b/files/fr/web/css/box-align/index.md
index 9571c6efac5bd2..05761979004bc0 100644
--- a/files/fr/web/css/box-align/index.md
+++ b/files/fr/web/css/box-align/index.md
@@ -6,7 +6,7 @@ translation_of: Web/CSS/box-align
 
 {{CSSRef}}{{Non-standard_header}}
 
->**Attention :** Cette propriété s'inscrivait dans une ancienne version du standard pour le module CSS sur les boîtes flexibles et a été remplacée dans une nouvelle version du standard.
+> **Attention :** Cette propriété s'inscrivait dans une ancienne version du standard pour le module CSS sur les boîtes flexibles et a été remplacée dans une nouvelle version du standard.
 
 La propriété [CSS](/fr/docs/Web/CSS) **`box-align`** définit comment un élément aligne son contenu par rapport à l'axe orthogonal à la disposition. L'effet obtenu ne sera visible que s'il y a de l'espace supplémentaire dans la boîte flexible.
 
diff --git a/files/fr/web/css/box-decoration-break/index.md b/files/fr/web/css/box-decoration-break/index.md
index 310b99ae3f9f7c..3e63712f0cf832 100644
--- a/files/fr/web/css/box-decoration-break/index.md
+++ b/files/fr/web/css/box-decoration-break/index.md
@@ -51,7 +51,10 @@ La propriété `box-decoration-break` est définie avec l'un des mots-clés déf
 ```css
 .exemple {
   background: linear-gradient(to bottom right, yellow, green);
-  box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow;
+  box-shadow:
+    8px 8px 10px 0px deeppink,
+    -5px -5px 5px 0px blue,
+    5px 5px 15px 0px yellow;
   padding: 0em 1em;
   border-radius: 16px;
   border-style: solid;
@@ -64,7 +67,7 @@ La propriété `box-decoration-break` est définie avec l'un des mots-clés déf
 ##### HTML
 
 ```html
-<span class="exemple">The<br>quick<br>orange fox</span>
+<span class="exemple">The<br />quick<br />orange fox</span>
 ```
 
 ##### Résultat _live_
@@ -82,7 +85,10 @@ La propriété `box-decoration-break` est définie avec l'un des mots-clés déf
 ```css
 .exemple {
   background: linear-gradient(to bottom right, yellow, green);
-  box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow;
+  box-shadow:
+    8px 8px 10px 0px deeppink,
+    -5px -5px 5px 0px blue,
+    5px 5px 15px 0px yellow;
   padding: 0em 1em;
   border-radius: 16px;
   border-style: solid;
@@ -90,8 +96,8 @@ La propriété `box-decoration-break` est définie avec l'un des mots-clés déf
   font: 24px sans-serif;
   line-height: 2;
 
- -webkit-box-decoration-break: clone;
- -o-box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+  -o-box-decoration-break: clone;
   box-decoration-break: clone;
 }
 ```
@@ -99,7 +105,7 @@ La propriété `box-decoration-break` est définie avec l'un des mots-clés déf
 ##### HTML
 
 ```html
-<span class="exemple">The<br>quick<br>orange fox</span>
+<span class="exemple">The<br />quick<br />orange fox</span>
 ```
 
 ##### Résultat _live_
diff --git a/files/fr/web/css/box-direction/index.md b/files/fr/web/css/box-direction/index.md
index d2bdf5741d3116..dc4fc23e9c829f 100644
--- a/files/fr/web/css/box-direction/index.md
+++ b/files/fr/web/css/box-direction/index.md
@@ -58,8 +58,8 @@ Si la direction de l'élément est définie grâce à l'attribut `dir`, la décl
 ```css
 .exemple {
   /* du bas vers le haut */
-  -moz-box-direction: reverse;      /* Mozilla */
-  -webkit-box-direction: reverse;   /* WebKit */
+  -moz-box-direction: reverse; /* Mozilla */
+  -webkit-box-direction: reverse; /* WebKit */
   box-direction: reverse;
 }
 ```
diff --git a/files/fr/web/css/box-orient/index.md b/files/fr/web/css/box-orient/index.md
index 0f33bb242fb5d6..315ab0d9c0dc26 100644
--- a/files/fr/web/css/box-orient/index.md
+++ b/files/fr/web/css/box-orient/index.md
@@ -60,8 +60,8 @@ Dans cet exemple, la propriété `box-orient` placera les deux sections [`<p>`](
 
 ```html
 <div class="exemple">
-    <p>Je serai à gauche de mon voisin.</p>
-    <p>Je serai à droite de mon voisin.</p>
+  <p>Je serai à gauche de mon voisin.</p>
+  <p>Je serai à droite de mon voisin.</p>
 </div>
 ```
 
@@ -69,14 +69,14 @@ Dans cet exemple, la propriété `box-orient` placera les deux sections [`<p>`](
 
 ```css
 div.exemple {
-  display: -moz-box;                /* Mozilla */
-  display: -webkit-box;             /* WebKit */
-  display: box;                     /* Comme spécifié */
+  display: -moz-box; /* Mozilla */
+  display: -webkit-box; /* WebKit */
+  display: box; /* Comme spécifié */
 
   /* Les enfants devraient s'orienter verticalement */
-  -moz-box-orient: horizontal;      /* Mozilla */
-  -webkit-box-orient: horizontal;   /* WebKit */
-  box-orient: horizontal;           /* Comme spécifié */
+  -moz-box-orient: horizontal; /* Mozilla */
+  -webkit-box-orient: horizontal; /* WebKit */
+  box-orient: horizontal; /* Comme spécifié */
 }
 ```
 
diff --git a/files/fr/web/css/box-pack/index.md b/files/fr/web/css/box-pack/index.md
index a710b7874a1987..d54c993407af8f 100644
--- a/files/fr/web/css/box-pack/index.md
+++ b/files/fr/web/css/box-pack/index.md
@@ -73,8 +73,8 @@ div.exemple {
   -webkit-box-align: center; /* WebKit */
 
   /* On groupe les éléments fils en bas de la boîte */
-  -moz-box-pack: end;      /* Mozilla */
-  -webkit-box-pack: end;   /* WebKit */
+  -moz-box-pack: end; /* Mozilla */
+  -webkit-box-pack: end; /* WebKit */
 }
 
 div.exemple p {
diff --git a/files/fr/web/css/box-shadow/index.md b/files/fr/web/css/box-shadow/index.md
index e1affc954048a6..2851d37b096b6f 100644
--- a/files/fr/web/css/box-shadow/index.md
+++ b/files/fr/web/css/box-shadow/index.md
@@ -28,7 +28,9 @@ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
 box-shadow: inset 5em 1em gold;
 
 /* Une liste d'ombres, séparées par des virgules */
-box-shadow: 3px 3px red, -1em 0 0.4em olive;
+box-shadow:
+  3px 3px red,
+  -1em 0 0.4em olive;
 
 /* Mots-clés globaux */
 box-shadow: inherit;
@@ -82,7 +84,7 @@ Chaque ombre de la liste (`none` sera traitée comme une liste de longueur nulle
 p {
   height: 5em;
   width: 300px;
-  background-color: rgba(128,128,128,0.1);
+  background-color: rgba(128, 128, 128, 0.1);
 }
 .ombre_droite_haut {
   box-shadow: 60px -16px teal; /* la valeur négative décale vers le haut */
@@ -94,7 +96,9 @@ p {
 }
 
 .ombres_multiples_diffuses {
-  box-shadow: inset 0 0 1em gold, 0 0 2em red;
+  box-shadow:
+    inset 0 0 1em gold,
+    0 0 2em red;
   /* deux ombres dans la liste et des rayons de flou pour chacune */
 }
 ```
diff --git a/files/fr/web/css/box-sizing/index.md b/files/fr/web/css/box-sizing/index.md
index ba78dc3578e8fa..69ec1afb0a7ce3 100644
--- a/files/fr/web/css/box-sizing/index.md
+++ b/files/fr/web/css/box-sizing/index.md
@@ -88,7 +88,7 @@ div {
 
 ```html
 <div class="content-box">Content box</div>
-<br>
+<br />
 <div class="border-box">Border box</div>
 ```
 
diff --git a/files/fr/web/css/break-after/index.md b/files/fr/web/css/break-after/index.md
index cb39bc6fc8274c..b35e0445292ffe 100644
--- a/files/fr/web/css/break-after/index.md
+++ b/files/fr/web/css/break-after/index.md
@@ -126,16 +126,17 @@ p {
 
 ```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. »</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. »</p>
+  <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. »
+  </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. »
+  </p>
 </div>
 ```
 
diff --git a/files/fr/web/css/break-before/index.md b/files/fr/web/css/break-before/index.md
index 0baad8a539a134..a8fe09a4fa7dab 100644
--- a/files/fr/web/css/break-before/index.md
+++ b/files/fr/web/css/break-before/index.md
@@ -129,19 +129,40 @@ Par défaut, les sous-titres et les paragraphes auraient été disposés de faç
 
   <h2>Sous-titre</h2>
 
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae fringilla mauris. Quisque commodo eget nisi sed pretium. Mauris luctus nec lacus in ultricies. Mauris vitae hendrerit arcu, ac scelerisque lacus. Aliquam lobortis in lacus sit amet posuere. Fusce iaculis urna id neque dapibus, eu lacinia lectus dictum.</p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae
+    fringilla mauris. Quisque commodo eget nisi sed pretium. Mauris luctus nec
+    lacus in ultricies. Mauris vitae hendrerit arcu, ac scelerisque lacus.
+    Aliquam lobortis in lacus sit amet posuere. Fusce iaculis urna id neque
+    dapibus, eu lacinia lectus dictum.
+  </p>
 
   <h2>Sous-titre</h2>
 
-  <p>Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras suscipit porta leo sit amet rutrum. Sed vehicula ornare tincidunt. Curabitur a ipsum ac diam mattis volutpat ac ut elit. Nullam luctus justo non vestibulum gravida. Morbi metus libero, pharetra non porttitor a, molestie nec nisi.</p>
+  <p>
+    Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras
+    suscipit porta leo sit amet rutrum. Sed vehicula ornare tincidunt. Curabitur
+    a ipsum ac diam mattis volutpat ac ut elit. Nullam luctus justo non
+    vestibulum gravida. Morbi metus libero, pharetra non porttitor a, molestie
+    nec nisi.
+  </p>
 
   <h2>Sous-titre</h2>
 
-  <p>Vivamus eleifend metus vitae neque placerat, eget interdum elit mattis. Donec eu vulputate nibh. Ut turpis leo, malesuada quis nisl nec, volutpat egestas tellus.
+  <p>
+    Vivamus eleifend metus vitae neque placerat, eget interdum elit mattis.
+    Donec eu vulputate nibh. Ut turpis leo, malesuada quis nisl nec, volutpat
+    egestas tellus.
+  </p>
 
   <h2>Sous-titre</h2>
 
-  <p>In finibus viverra enim vel suscipit. Quisque consequat velit eu orci malesuada, ut interdum tortor molestie. Proin sed pellentesque augue. Nam risus justo, faucibus non porta a, congue vel massa. Cras luctus lacus nisl, sed tincidunt velit pharetra ac. Duis suscipit faucibus dui sed ultricies.</p>
+  <p>
+    In finibus viverra enim vel suscipit. Quisque consequat velit eu orci
+    malesuada, ut interdum tortor molestie. Proin sed pellentesque augue. Nam
+    risus justo, faucibus non porta a, congue vel massa. Cras luctus lacus nisl,
+    sed tincidunt velit pharetra ac. Duis suscipit faucibus dui sed ultricies.
+  </p>
 </article>
 ```
 
diff --git a/files/fr/web/css/break-inside/index.md b/files/fr/web/css/break-inside/index.md
index feb7a25521d3e7..8a0fc0f636e4a9 100644
--- a/files/fr/web/css/break-inside/index.md
+++ b/files/fr/web/css/break-inside/index.md
@@ -89,16 +89,17 @@ p {
 
 ```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. »</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. »</p>
+  <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. »
+  </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. »
+  </p>
 </div>
 ```
 
diff --git a/files/fr/web/css/calc/index.md b/files/fr/web/css/calc/index.md
index 9c7600e414c718..c8f1922c2a2bdc 100644
--- a/files/fr/web/css/calc/index.md
+++ b/files/fr/web/css/calc/index.md
@@ -82,7 +82,7 @@ input {
 }
 
 #boiteformulaire {
-  width: calc(100%/6);
+  width: calc(100% / 6);
   border: 1px solid black;
   padding: 4px;
 }
@@ -93,8 +93,8 @@ Dans ce cas, le formulaire est lui-même défini pour utiliser un sixième de la
 ```html
 <form>
   <div id="boiteformulaire">
-  <label>Tapez quelque chose :</label>
-  <input type="text">
+    <label>Tapez quelque chose :</label>
+    <input type="text" />
   </div>
 </form>
 ```
diff --git a/files/fr/web/css/caption-side/index.md b/files/fr/web/css/caption-side/index.md
index 72fd5a9a2e300d..47b13306cb776c 100644
--- a/files/fr/web/css/caption-side/index.md
+++ b/files/fr/web/css/caption-side/index.md
@@ -83,17 +83,21 @@ td {
 
 ```html
 <table class="top">
-  <caption>Une légende au-dessus du tableau</caption>
+  <caption>
+    Une légende au-dessus du tableau
+  </caption>
   <tr>
     <td>Des données d'un tableau</td>
     <td>Pfiou encore des données</td>
   </tr>
 </table>
 
-<br>
+<br />
 
 <table class="bottom">
-  <caption>Une légende en dessous du tableau</caption>
+  <caption>
+    Une légende en dessous du tableau
+  </caption>
   <tr>
     <td>Des données d'un tableau</td>
     <td>Pfiou encore des données</td>
diff --git a/files/fr/web/css/cascade/index.md b/files/fr/web/css/cascade/index.md
index 3d10e45062ca23..8852c85bd87543 100644
--- a/files/fr/web/css/cascade/index.md
+++ b/files/fr/web/css/cascade/index.md
@@ -56,16 +56,16 @@ L'algorithme de la cascade détermine quelle valeur s'applique pour chaque propr
 
 2. **Origine et importance**&nbsp;: Ensuite, ces règles sont triées selon leur importance, c'est-à-dire si elles sont suivies ou non par `!important`, et selon leur origine. En ignorant les couches pour le moment, on obtient l'ordre suivant pour la cascade&nbsp;:
 
-    |   Ordre (du plus faible au plus élevé)  | Origine                        | Importance   |
-    | --------------------------------------- | ------------------------------ | ------------ |
-    | 1                                       | Agent utilisateur (navigateur) | normal       |
-    | 2                                       | Utilisatrice/utilisateur       | normal       |
-    | 3                                       | Site                           | normal       |
-    | 4                                       | Animations CSS @keyframe       |              |
-    | 5                                       | Site                           | `!important` |
-    | 6                                       | Utilisatrice/utilisateur       | `!important` |
-    | 7                                       | Agent utilisateur (navigateur) | `!important` |
-    | 8                                       | Transitions CSS                |              |
+   | Ordre (du plus faible au plus élevé) | Origine                        | Importance   |
+   | ------------------------------------ | ------------------------------ | ------------ |
+   | 1                                    | Agent utilisateur (navigateur) | normal       |
+   | 2                                    | Utilisatrice/utilisateur       | normal       |
+   | 3                                    | Site                           | normal       |
+   | 4                                    | Animations CSS @keyframe       |              |
+   | 5                                    | Site                           | `!important` |
+   | 6                                    | Utilisatrice/utilisateur       | `!important` |
+   | 7                                    | Agent utilisateur (navigateur) | `!important` |
+   | 8                                    | Transitions CSS                |              |
 
 3. **Spécificité**&nbsp;: En cas d'égalité pour une même origine, [la spécificité](/fr/docs/Web/CSS/Specificity) d'une règle est considérée pour déterminer laquelle choisir. La spécificité des sélecteurs est comparée, et c'est la déclaration avec la plus grande spécificité qui l'emporte.
 4. **Ordre d'apparence**&nbsp;: Si plusieurs valeurs pour une même propriété sont décrites dans des règles avec des sélecteurs de même spécificité, c'est la dernière déclaration, dans l'ordre des styles, qui est appliquée.
@@ -136,8 +136,8 @@ li {
 
 ```html
 <ul>
-<li class="specific">1<sup>er</sup></li>
-<li>2<sup>e</sup></li>
+  <li class="specific">1<sup>er</sup></li>
+  <li>2<sup>e</sup></li>
 </ul>
 ```
 
@@ -145,10 +145,10 @@ Dans ce cas, les règles des déclarations pour `li` et `.specific` devraient s'
 
 Comme précédemment, on a quatre étapes dans l'algorithme de la cascade, dans cet ordre&nbsp;:
 
-  1. Pertinence
-  2. Origine et importance
-  3. Spécificité
-  4. Ordre d'apparence
+1. Pertinence
+2. Origine et importance
+3. Spécificité
+4. Ordre d'apparence
 
 La règle avec une marge de `1px` s'applique aux médias imprimés. Par manque de _pertinence_ du type de média, on la retire des règles à considérer.
 
@@ -222,20 +222,20 @@ Et dans le corps du document, on a des styles en incise (<i lang="en">inline sty
 
 Dans le bloc de code CSS précédent, on a trois couches de cascade qui sont créées et nommées dans cet ordre&nbsp;: A, B, et C. Trois feuilles de styles ont directement été importées dans des couches et deux ont été importées sans créer de couches ou sans y être affectées. Dans la liste qui suit, «&nbsp;Tous les styles sans couche&nbsp;» (au quatrième range) inclut les styles de ces deux feuilles de styles et les éventuels blocs CSS supplémentaires qui ne seraient pas rattachés à une couche. On a en plus deux styles en incise, une déclaration normale pour `line-height` et une déclaration importante pour `text-decoration`&nbsp;:
 
-| Ordre (du plus faible au plus élevé)    | Style du site               | Importance   |
-| ---------------------------------------- | --------------------------- | ------------ |
-| 1                                        | A - première couche         | normal       |
-| 2                                        | B - deuxième couche         | normal       |
-| 3                                        | C - dernière couche         | normal       |
-| 4                                        | Tous les styles sans couche | normal       |
-| 5                                        | Styles en incise            | normal       |
-| 6                                        | Animations                  |              |
-| 7                                        | Tous les styles sans couche | `!important` |
-| 8                                        | C - dernière couche         | `!important` |
-| 9                                        | B - deuxième couche         | `!important` |
-| 10                                       | A - première couche         | `!important` |
-| 11                                       | Styles en incise            | `!important` |
-| 12                                       | Transitions                 |              |
+| Ordre (du plus faible au plus élevé) | Style du site               | Importance   |
+| ------------------------------------ | --------------------------- | ------------ |
+| 1                                    | A - première couche         | normal       |
+| 2                                    | B - deuxième couche         | normal       |
+| 3                                    | C - dernière couche         | normal       |
+| 4                                    | Tous les styles sans couche | normal       |
+| 5                                    | Styles en incise            | normal       |
+| 6                                    | Animations                  |              |
+| 7                                    | Tous les styles sans couche | `!important` |
+| 8                                    | C - dernière couche         | `!important` |
+| 9                                    | B - deuxième couche         | `!important` |
+| 10                                   | A - première couche         | `!important` |
+| 11                                   | Styles en incise            | `!important` |
+| 12                                   | Transitions                 |              |
 
 Pour tous les types d'origine, les styles normaux (sans importance particulière) contenus dans les couches ont la précédence la plus faible. Dans notre exemple, les styles normaux associés à la première couche déclarée (A) ont une précédence inférieure aux styles normaux déclarés dans la deuxième couche déclarée (B), qui ont une précédence inférieure aux styles normaux de la troisième couche déclarée (C). Tous ces styles présents dans des couches ont une précédence inférieure aux styles normaux qui ne sont pas dans des couches. Dans notre exemple, cela inclut les styles normaux de `stylesSansCouche.css`, `plusDeStylesSansCouche.css`, ainsi que la règle sur la propriété `color` de `p` écrite dans l'élément `<style>`.
 
@@ -416,20 +416,32 @@ p {
   animation: infinite 5s alternate nomRepete;
 }
 @keyframes nomRepete {
-  from {font-size: 1rem;}
-  to {font-size: 3rem;}
+  from {
+    font-size: 1rem;
+  }
+  to {
+    font-size: 3rem;
+  }
 }
 
 @layer A {
   @keyframes nomRepete {
-    from {background-color: yellow;}
-    to {background-color: orange;}
+    from {
+      background-color: yellow;
+    }
+    to {
+      background-color: orange;
+    }
   }
 }
 @layer B {
   @keyframes nomRepete {
-    from {color: white;}
-    to {color: black;}
+    from {
+      color: white;
+    }
+    to {
+      color: black;
+    }
   }
 }
 ```
diff --git a/files/fr/web/css/child_combinator/index.md b/files/fr/web/css/child_combinator/index.md
index 95f4702accc2b3..d5c9368a278d9c 100644
--- a/files/fr/web/css/child_combinator/index.md
+++ b/files/fr/web/css/child_combinator/index.md
@@ -11,7 +11,7 @@ Le combinateur `>` sépare deux sélecteurs et cible seulement les éléments co
 ```css
 /* Les éléments <li> qui sont des enfant d'un */
 /* <ul class="mon-truc"> */
-ul.mon-truc>li {
+ul.mon-truc > li {
   margin: 2em;
 }
 ```
@@ -42,7 +42,8 @@ div > span {
 
 ```html
 <div>
-  <span>Premier span du div.
+  <span
+    >Premier span du div.
     <span>Deuxième span, dans un span dans un div.</span>
   </span>
 </div>
diff --git a/files/fr/web/css/clamp/index.md b/files/fr/web/css/clamp/index.md
index 5b82d6bf925afc..e67bd1fa879737 100644
--- a/files/fr/web/css/clamp/index.md
+++ b/files/fr/web/css/clamp/index.md
@@ -75,7 +75,9 @@ Ici on utilise l'unité `rem` pour fixer un maximum correspondant à deux fois l
 
 ```html
 <h1>Ce texte est toujours lisible mais sa taille ne change pas.</h1>
-<h1 class="responsive">Ce texte est toujours lisible et s'adapte dans une certaine mesure.</h1>
+<h1 class="responsive">
+  Ce texte est toujours lisible et s'adapte dans une certaine mesure.
+</h1>
 ```
 
 #### Résultat
diff --git a/files/fr/web/css/class_selectors/index.md b/files/fr/web/css/class_selectors/index.md
index c40d36766d8064..e5ed711d059b60 100644
--- a/files/fr/web/css/class_selectors/index.md
+++ b/files/fr/web/css/class_selectors/index.md
@@ -49,7 +49,7 @@ Cela est exactement équivalent à l'utilisation du [sélecteur d'attribut](/fr/
   background-color: skyblue;
 }
 .toto {
- font-weight: bold;
+  font-weight: bold;
 }
 ```
 
@@ -57,7 +57,10 @@ Cela est exactement équivalent à l'utilisation du [sélecteur d'attribut](/fr/
 
 ```html
 <div class="classy">Voici un div avec du texte.</div>
-<div class="toto classy truc">Les éléments peuvent avoir plusieurs classes, le sélecteur fonctionnera tout de même !</div>
+<div class="toto classy truc">
+  Les éléments peuvent avoir plusieurs classes, le sélecteur fonctionnera tout
+  de même !
+</div>
 <div>En voilà un autre.</div>
 ```
 
diff --git a/files/fr/web/css/clear/index.md b/files/fr/web/css/clear/index.md
index 2497f9abbaf81a..431b42af27cef3 100644
--- a/files/fr/web/css/clear/index.md
+++ b/files/fr/web/css/clear/index.md
@@ -20,9 +20,9 @@ Les éléments flottants qui sont dégagés sont les éléments flottants préc
 >
 > ```css
 > #conteneur::after {
->    content: "";
->    display: block;
->    clear: both;
+>   content: "";
+>   display: block;
+>   clear: both;
 > }
 > ```
 
@@ -74,7 +74,10 @@ clear: unset;
 
 ```html
 <div class="wrapper">
-  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="black">
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
+    diam. Duis mattis varius dui. Suspendisse eget dolor.
+  </p>
   <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
   <p class="left">Ce paragraphe est dégagé à gauche.</p>
 </div>
@@ -83,9 +86,9 @@ clear: unset;
 #### CSS
 
 ```css
-.wrapper{
-  border:1px solid black;
-  padding:10px;
+.wrapper {
+  border: 1px solid black;
+  padding: 10px;
 }
 .left {
   border: 1px solid black;
@@ -102,7 +105,7 @@ clear: unset;
   float: left;
   margin: 0;
   background-color: red;
-  width:20%;
+  width: 20%;
 }
 p {
   width: 50%;
@@ -117,7 +120,10 @@ p {
 
 ```html
 <div class="wrapper">
-  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="black">
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
+    diam. Duis mattis varius dui. Suspendisse eget dolor.
+  </p>
   <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
   <p class="right">Ce paragraphe est dégagé à droite.</p>
 </div>
@@ -126,9 +132,9 @@ p {
 #### CSS
 
 ```css
-.wrapper{
-  border:1px solid black;
-  padding:10px;
+.wrapper {
+  border: 1px solid black;
+  padding: 10px;
 }
 .right {
   border: 1px solid black;
@@ -139,13 +145,13 @@ p {
   margin: 0;
   background-color: black;
   color: #fff;
-  width:20%;
+  width: 20%;
 }
 .red {
   float: right;
   margin: 0;
   background-color: red;
-  width:20%;
+  width: 20%;
 }
 p {
   width: 50%;
@@ -160,8 +166,15 @@ p {
 
 ```html
 <div class="wrapper">
-  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p>
-  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="black">
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
+    diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus
+    ac dui.
+  </p>
+  <p class="red">
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
+    diam. Duis mattis varius dui. Suspendisse eget dolor.
+  </p>
   <p class="both">Ce paragraphe est dégagé de chaque côté.</p>
 </div>
 ```
@@ -169,9 +182,9 @@ p {
 #### CSS
 
 ```css
-.wrapper{
-  border:1px solid black;
-  padding:10px;
+.wrapper {
+  border: 1px solid black;
+  padding: 10px;
 }
 .both {
   border: 1px solid black;
@@ -182,13 +195,13 @@ p {
   margin: 0;
   background-color: black;
   color: #fff;
-  width:20%;
+  width: 20%;
 }
 .red {
   float: right;
   margin: 0;
   background-color: red;
-  width:20%;
+  width: 20%;
 }
 p {
   width: 45%;
diff --git a/files/fr/web/css/clip-path/index.md b/files/fr/web/css/clip-path/index.md
index f8fe06fad6ba4a..0837b5d7aaccb9 100644
--- a/files/fr/web/css/clip-path/index.md
+++ b/files/fr/web/css/clip-path/index.md
@@ -56,6 +56,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
 ### Valeurs
 
 - `<clip-source>`
+
   - : Une [`url()`](/fr/docs/Web/CSS/url) qui référence un élément [SVG](/fr/docs/Web/SVG) [`<clipPath>`](/fr/docs/Web/SVG/Element/clipPath).
 
 - [`<basic-shape>`](/fr/docs/Web/CSS/basic-shape)
@@ -468,7 +469,9 @@ body {
 }
 
 .view-box {
-  box-shadow: 1rem 1rem 0 #efefef inset, -1rem -1rem 0 #efefef inset;
+  box-shadow:
+    1rem 1rem 0 #efefef inset,
+    -1rem -1rem 0 #efefef inset;
 }
 
 .container.view-box::after {
diff --git a/files/fr/web/css/clip/index.md b/files/fr/web/css/clip/index.md
index 2d0fabddfd85aa..5a4e9420e26730 100644
--- a/files/fr/web/css/clip/index.md
+++ b/files/fr/web/css/clip/index.md
@@ -88,17 +88,9 @@ clip: unset;
 
 ```html
 <p class="dotted-border">
-  <img
-    src="macarons.png"
-    title="Image originale" />
-  <img
-    id="top-left"
-    src="macarons.png"
-    title="Image rognée en haut à gauche" />
-  <img
-    id="middle"
-    src="macarons.png"
-    title="Image rognée au centre" />
+  <img src="macarons.png" title="Image originale" />
+  <img id="top-left" src="macarons.png" title="Image rognée en haut à gauche" />
+  <img id="middle" src="macarons.png" title="Image rognée au centre" />
   <img
     id="bottom-right"
     src="macarons.png"
diff --git a/files/fr/web/css/color/index.md b/files/fr/web/css/color/index.md
index bcbd5aaa1a287d..a77a6c418bed1c 100644
--- a/files/fr/web/css/color/index.md
+++ b/files/fr/web/css/color/index.md
@@ -35,7 +35,7 @@ color: rgb(34, 12, 64, 0.6);
 color: rgba(34, 12, 64, 0.6);
 color: rgb(34 12 64 / 0.6);
 color: rgba(34 12 64 / 0.3);
-color: rgb(34.0 12 64 / 60%);
+color: rgb(34 12 64 / 60%);
 color: rgba(34.6 12 64 / 30%);
 
 /* Valeurs <hsl()> */
@@ -43,10 +43,9 @@ color: hsl(30, 100%, 50%, 0.6);
 color: hsla(30, 100%, 50%, 0.6);
 color: hsl(30 100% 50% / 0.6);
 color: hsla(30 100% 50% / 0.6);
-color: hsl(30.0 100% 50% / 60%);
+color: hsl(30 100% 50% / 60%);
 color: hsla(30.2 100% 50% / 60%);
 
-
 /* Valeurs globales */
 color: inherit;
 color: initial;
@@ -93,16 +92,11 @@ La propriété `color` est définie grâce à une valeur de type {{cssxref("&lt;
 
 ```html
 <p class="exemple">
-  En passant elle prit sur un rayon un pot de
-  confiture portant cette étiquette,
-  <span class="confiture">
-    «&nbsp;MARMELADE D’ORANGES.&nbsp;»
-  </span>
-  Mais, à son grand regret, le pot était vide&nbsp;:
-  elle n’osait le laisser tomber dans la crainte
-  de tuer quelqu’un&nbsp;; aussi s’arrangea-t-elle de
-  manière à le déposer en passant dans une
-  des armoires.
+  En passant elle prit sur un rayon un pot de confiture portant cette étiquette,
+  <span class="confiture"> «&nbsp;MARMELADE D’ORANGES.&nbsp;» </span>
+  Mais, à son grand regret, le pot était vide&nbsp;: elle n’osait le laisser
+  tomber dans la crainte de tuer quelqu’un&nbsp;; aussi s’arrangea-t-elle de
+  manière à le déposer en passant dans une des armoires.
 </p>
 ```
 
@@ -118,7 +112,7 @@ Le ratio de contraste est déterminé en comparant la luminosité de la couleur
 
 - [Contrôleur de contraste WebAIM](https://webaim.org/resources/contrastchecker/)
 - [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
-- _[Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0 (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
+- _[Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0 (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)_
 
 ## Spécifications
 
diff --git a/files/fr/web/css/color_value/index.md b/files/fr/web/css/color_value/index.md
index d1b7073a5930c8..fcde6d9669acf6 100644
--- a/files/fr/web/css/color_value/index.md
+++ b/files/fr/web/css/color_value/index.md
@@ -162,30 +162,38 @@ div {
 ```
 
 ```js hidden
-const inputElem = document.querySelector('input');
-const divElem = document.querySelector('div');
+const inputElem = document.querySelector("input");
+const divElem = document.querySelector("div");
 
 function validTextColor(stringToTest) {
-  if (stringToTest === "") { return false; }
-  if (stringToTest === "inherit") { return false; }
-  if (stringToTest === "transparent") { return false; }
+  if (stringToTest === "") {
+    return false;
+  }
+  if (stringToTest === "inherit") {
+    return false;
+  }
+  if (stringToTest === "transparent") {
+    return false;
+  }
 
   const image = document.createElement("img");
   image.style.color = "rgb(0, 0, 0)";
   image.style.color = stringToTest;
-  if (image.style.color !== "rgb(0, 0, 0)") { return true; }
+  if (image.style.color !== "rgb(0, 0, 0)") {
+    return true;
+  }
   image.style.color = "rgb(255, 255, 255)";
   image.style.color = stringToTest;
   return image.style.color !== "rgb(255, 255, 255)";
 }
 
-inputElem.addEventListener('change', () => {
+inputElem.addEventListener("change", () => {
   if (validTextColor(inputElem.value)) {
     divElem.style.backgroundColor = inputElem.value;
-    divElem.textContent = '';
+    divElem.textContent = "";
   } else {
-    divElem.style.backgroundColor = 'white';
-    divElem.textContent = 'Valeur de couleur invalide';
+    divElem.style.backgroundColor = "white";
+    divElem.textContent = "Valeur de couleur invalide";
   }
 });
 ```
diff --git a/files/fr/web/css/column-count/index.md b/files/fr/web/css/column-count/index.md
index 0e7ad53ca24296..7a73a5390d7656 100644
--- a/files/fr/web/css/column-count/index.md
+++ b/files/fr/web/css/column-count/index.md
@@ -48,7 +48,7 @@ column-count: unset;
 ```css
 .exemple {
   border: 10px solid #000000;
-  column-count:3;
+  column-count: 3;
 }
 ```
 
@@ -56,16 +56,12 @@ column-count: unset;
 
 ```html
 <p class="exemple">
-  « 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. »
-  « 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. »
+  « 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. » « 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. »
 </p>
 ```
 
diff --git a/files/fr/web/css/column-fill/index.md b/files/fr/web/css/column-fill/index.md
index 3a06fac0a4481b..febb4ededd1369 100644
--- a/files/fr/web/css/column-fill/index.md
+++ b/files/fr/web/css/column-fill/index.md
@@ -50,7 +50,7 @@ Cette propriété est définie grâce à l'un des mots-clés définis ci-après.
 ```css
 .exemple {
   border: 10px solid #000000;
-  column-count:3;
+  column-count: 3;
   column-fill: balance;
 }
 ```
@@ -59,16 +59,12 @@ Cette propriété est définie grâce à l'un des mots-clés définis ci-après.
 
 ```html
 <p class="exemple">
-  « 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. »
-  « 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. »
+  « 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. » « 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. »
 </p>
 ```
 
diff --git a/files/fr/web/css/column-gap/index.md b/files/fr/web/css/column-gap/index.md
index 7afdefa9ce9cd4..228ac734b65f51 100644
--- a/files/fr/web/css/column-gap/index.md
+++ b/files/fr/web/css/column-gap/index.md
@@ -124,9 +124,8 @@ column-gap: unset;
 
 ```html
 <p class="content-box">
-  Un texte sur plusieurs colonnes avec une gouttière
-  de 40px paramétrée grâce à la propriété `column-gap`.
-  C'est plutôt pas mal comme effet non ?
+  Un texte sur plusieurs colonnes avec une gouttière de 40px paramétrée grâce à
+  la propriété `column-gap`. C'est plutôt pas mal comme effet non ?
 </p>
 ```
 
diff --git a/files/fr/web/css/column-rule-color/index.md b/files/fr/web/css/column-rule-color/index.md
index e56d014737ee9d..b06d4564ccde99 100644
--- a/files/fr/web/css/column-rule-color/index.md
+++ b/files/fr/web/css/column-rule-color/index.md
@@ -47,16 +47,14 @@ La propriété `column-rule-color` se définit grâce à une valeur de type `<co
 ### HTML
 
 ```html
-<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. »
-   « 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. »</p>
+<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. » « 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. »
+</p>
 ```
 
 ### CSS
diff --git a/files/fr/web/css/column-rule-style/index.md b/files/fr/web/css/column-rule-style/index.md
index d74d086b09bf87..426030eaca9d2d 100644
--- a/files/fr/web/css/column-rule-style/index.md
+++ b/files/fr/web/css/column-rule-style/index.md
@@ -54,7 +54,7 @@ La propriété `column-rule-style` avec une valeur unique de type `<br-style>`.
 .exemple {
   border: 10px solid #000000;
 
-  columns:3;
+  columns: 3;
   column-rule-width: thick;
   column-rule-color: blue;
   column-rule-style: dashed;
@@ -64,17 +64,13 @@ La propriété `column-rule-style` avec une valeur unique de type `<br-style>`.
 ### HTML
 
 ```html
-<p class=exemple>
-  « 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. »
-  « 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. »
+<p class="exemple">
+  « 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. » « 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. »
 </p>
 ```
 
diff --git a/files/fr/web/css/column-rule-width/index.md b/files/fr/web/css/column-rule-width/index.md
index f9e851849979ee..a34c0316a3cd38 100644
--- a/files/fr/web/css/column-rule-width/index.md
+++ b/files/fr/web/css/column-rule-width/index.md
@@ -51,7 +51,7 @@ La propriété `column-rule-width` est définie grâce à une valeur de type `<b
 ```css
 .exemple {
   border: 10px solid #000000;
-  columns:3;
+  columns: 3;
   column-rule-width: thick;
   column-rule-color: blue;
   column-rule-style: dashed;
@@ -61,17 +61,13 @@ La propriété `column-rule-width` est définie grâce à une valeur de type `<b
 ### HTML
 
 ```html
-<p class=exemple>
-  « 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. »
-  « 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. »
+<p class="exemple">
+  « 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. » « 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. »
 </p>
 ```
 
diff --git a/files/fr/web/css/column-rule/index.md b/files/fr/web/css/column-rule/index.md
index ebf9bacd17f0db..2c65541901ea9d 100644
--- a/files/fr/web/css/column-rule/index.md
+++ b/files/fr/web/css/column-rule/index.md
@@ -54,16 +54,16 @@ Cette propriété peut être définie avec une, deux ou trois valeurs telles que
 
 ```html
 <div id="col_rul">
-  <p> column one </p>
-  <p> column two </p>
-  <p> column three </p>
+  <p>column one</p>
+  <p>column two</p>
+  <p>column three</p>
 </div>
 ```
 
 ### CSS
 
 ```css
-#col_rul{
+#col_rul {
   padding: 0.3em;
   background: gold;
   border: groove 2px gold;
diff --git a/files/fr/web/css/column-span/index.md b/files/fr/web/css/column-span/index.md
index 1041c11104a82b..0ca987bbedb532 100644
--- a/files/fr/web/css/column-span/index.md
+++ b/files/fr/web/css/column-span/index.md
@@ -45,7 +45,7 @@ column-span: unset;
 ```css
 .exemple {
   border: 10px solid #000000;
-  columns:3;
+  columns: 3;
 }
 
 h2 {
@@ -56,17 +56,14 @@ h2 {
 ### HTML
 
 ```html
-<div class=exemple>
-  « 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. »
-  <h2> La suite</h2>
-  « 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
+<div class="exemple">
+  « 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. »
+  <h2>La suite</h2>
+  « 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. »
 </div>
 ```
diff --git a/files/fr/web/css/column-width/index.md b/files/fr/web/css/column-width/index.md
index 166c5ea4ea4525..e075cb36de9ec8 100644
--- a/files/fr/web/css/column-width/index.md
+++ b/files/fr/web/css/column-width/index.md
@@ -63,10 +63,9 @@ column-width: unset;
 
 ```html
 <div class="content-box">
-  Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
-  sed diam nonummy nibh euismod tincidunt ut laoreet dolore
-  magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
-  quis nostrud exerci tation ullamcorper suscipit lobortis
+  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
+  enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
   nisl ut aliquip ex ea commodo consequat.
 </div>
 ```
diff --git a/files/fr/web/css/column_combinator/index.md b/files/fr/web/css/column_combinator/index.md
index 12d1b2e620cd53..b8c96afca69b3e 100644
--- a/files/fr/web/css/column_combinator/index.md
+++ b/files/fr/web/css/column_combinator/index.md
@@ -11,7 +11,7 @@ Le **combinateur de colonne** (`||`) est placé entre deux sélecteurs CSS. Les
 ```css
 /* Les cellules de tableaux qui appartiennent */
 /* à la colonne "selected" */
-col.selected || td {
+col.selected||td {
   background: gray;
 }
 ```
@@ -19,7 +19,7 @@ col.selected || td {
 ## Syntaxe
 
 ```css
-column-selector || cell-selector {
+column-selector||cell-selector {
   /* propriétés pour le style */
 }
 ```
@@ -31,14 +31,14 @@ column-selector || cell-selector {
 ```html
 <table border="1">
   <colgroup>
-    <col span="2"/>
-    <col class="selected"/>
+    <col span="2" />
+    <col class="selected" />
   </colgroup>
   <tbody>
     <tr>
-      <td>A
-      <td>B
-      <td>C
+      <td>A</td>
+      <td>B</td>
+      <td>C</td>
     </tr>
     <tr>
       <td colspan="2">D</td>
@@ -55,7 +55,7 @@ column-selector || cell-selector {
 ### CSS
 
 ```css
-col.selected || td {
+col.selected||td {
   background: gray;
   color: white;
   font-weight: bold;
diff --git a/files/fr/web/css/columns/index.md b/files/fr/web/css/columns/index.md
index ceb5afbee70ab7..1f9095ae783589 100644
--- a/files/fr/web/css/columns/index.md
+++ b/files/fr/web/css/columns/index.md
@@ -27,7 +27,6 @@ columns: 1 auto;
 columns: auto 12em;
 columns: auto auto;
 
-
 /* Valeurs globales */
 columns: inherit;
 columns: initial;
@@ -67,17 +66,13 @@ La propriété `columns` se définit avec un ou deux valeurs parmi celles décri
 ### HTML
 
 ```html
-<p class=exemple>
-  « 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. »
-  « 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. »
+<p class="exemple">
+  « 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. » « 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. »
 </p>
 ```
 
diff --git a/files/fr/web/css/comments/index.md b/files/fr/web/css/comments/index.md
index c8aeb44aa68a4c..d5581dadffb1bb 100644
--- a/files/fr/web/css/comments/index.md
+++ b/files/fr/web/css/comments/index.md
@@ -27,7 +27,6 @@ sur plusieurs
 lignes
 */
 
-
 /* Le commentaire qui suit permet
    de désactiver une règle */
 /*
diff --git a/files/fr/web/css/containing_block/index.md b/files/fr/web/css/containing_block/index.md
index 91ac20cd99fb18..54df71ab0efe44 100644
--- a/files/fr/web/css/containing_block/index.md
+++ b/files/fr/web/css/containing_block/index.md
@@ -87,10 +87,10 @@ section {
 }
 
 p {
-  width: 50%;   /* == 400px * .5 = 200px */
-  height: 25%;  /* == 160px * .25 = 40px */
-  margin: 5%;   /* == 400px * .05 = 20px */
-  padding: 5%;  /* == 400px * .05 = 20px */
+  width: 50%; /* == 400px * .5 = 200px */
+  height: 25%; /* == 160px * .25 = 40px */
+  margin: 5%; /* == 400px * .05 = 20px */
+  padding: 5%; /* == 400px * .05 = 20px */
   background: cyan;
 }
 ```
@@ -120,8 +120,8 @@ section {
 }
 
 p {
-  width: 50%;     /* == half the body's width */
-  height: 200px;  /* Note: a percentage would be 0 */
+  width: 50%; /* == half the body's width */
+  height: 200px; /* Note: a percentage would be 0 */
   background: cyan;
 }
 ```
@@ -157,10 +157,10 @@ section {
 
 p {
   position: absolute;
-  width: 50%;   /* == (400px + 20px + 20px) * .5 = 220px */
-  height: 25%;  /* == (160px + 30px + 30px) * .25 = 55px */
-  margin: 5%;   /* == (400px + 20px + 20px) * .05 = 22px */
-  padding: 5%;  /* == (400px + 20px + 20px) * .05 = 22px */
+  width: 50%; /* == (400px + 20px + 20px) * .5 = 220px */
+  height: 25%; /* == (160px + 30px + 30px) * .25 = 55px */
+  margin: 5%; /* == (400px + 20px + 20px) * .05 = 22px */
+  padding: 5%; /* == (400px + 20px + 20px) * .05 = 22px */
   background: cyan;
 }
 ```
@@ -194,10 +194,10 @@ section {
 
 p {
   position: fixed;
-  width: 50%;   /* == (50vw - (width of vertical scrollbar)) */
-  height: 50%;  /* == (50vh - (height of horizontal scrollbar)) */
-  margin: 5%;   /* == (5vw - (width of vertical scrollbar)) */
-  padding: 5%;  /* == (5vw - (width of vertical scrollbar)) */
+  width: 50%; /* == (50vw - (width of vertical scrollbar)) */
+  height: 50%; /* == (50vh - (height of horizontal scrollbar)) */
+  margin: 5%; /* == (5vw - (width of vertical scrollbar)) */
+  padding: 5%; /* == (5vw - (width of vertical scrollbar)) */
   background: cyan;
 }
 ```
@@ -232,10 +232,10 @@ p {
   position: absolute;
   left: 80px;
   top: 30px;
-  width: 50%;   /* == 200px */
-  height: 25%;  /* == 40px */
-  margin: 5%;   /* == 20px */
-  padding: 5%;  /* == 20px */
+  width: 50%; /* == 200px */
+  height: 25%; /* == 40px */
+  margin: 5%; /* == 20px */
+  padding: 5%; /* == 20px */
   background: cyan;
 }
 ```
diff --git a/files/fr/web/css/content/index.md b/files/fr/web/css/content/index.md
index d8777cf993087f..b2df04dd8be4fd 100644
--- a/files/fr/web/css/content/index.md
+++ b/files/fr/web/css/content/index.md
@@ -67,6 +67,7 @@ content: unset;
 - [`<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, 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) ou [`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).
@@ -106,16 +107,23 @@ Dans cet exemple, on insère des marques de citation et le mot «&nbsp;Chapitre&
 
 ```html
 <h1>5</h1>
-<p>Commençons par une citation de Sir Tim Berners-Lee,
+<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.
+    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,
+<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>
+    Internet est une ressource publique mondiale qui doit demeurer ouverte et
+    accessible.</q
+  >
 </p>
 ```
 
@@ -134,7 +142,7 @@ q::after {
   content: close-quote;
 }
 
-h1::before  {
+h1::before {
   content: "Chapitre ";
   /* L'espace après la dernière lettre est 
      voulu afin de détacher le mot du reste
@@ -157,10 +165,13 @@ h1::before  {
 #### CSS
 
 ```css
-a::before{
+a::before {
   content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") /
     " MOZILLA: ";
-  font: x-small Arial, freeSans, sans-serif;
+  font:
+    x-small Arial,
+    freeSans,
+    sans-serif;
   color: gray;
 }
 ```
@@ -204,8 +215,14 @@ Dans cet exemple, on insère une image avant chaque lien et on ajoute son identi
 
 ```html
 <ul>
-  <li><a id="moz" href="https://www.mozilla.org/fr/">Page d'accueil Mozilla</a></li>
-  <li><a id="mdn" href="https://developer.mozilla.org/">Mozilla Developer Network</a></li>
+  <li>
+    <a id="moz" href="https://www.mozilla.org/fr/">Page d'accueil Mozilla</a>
+  </li>
+  <li>
+    <a id="mdn" href="https://developer.mozilla.org/"
+      >Mozilla Developer Network</a
+    >
+  </li>
 </ul>
 ```
 
@@ -255,8 +272,9 @@ Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est p
   content: url("mdn.svg");
 }
 
-#replaced::after { /* Ceci ne sera pas affiché, */
-                   /* l'élément sera un élément remplacé */
+#replaced::after {
+  /* Ceci ne sera pas affiché, */
+  /* l'élément sera un élément remplacé */
   content: " (" attr(id) ")";
 }
 ```
diff --git a/files/fr/web/css/counter/index.md b/files/fr/web/css/counter/index.md
index 2798993745c68c..d1a9fb532148fd 100644
--- a/files/fr/web/css/counter/index.md
+++ b/files/fr/web/css/counter/index.md
@@ -61,8 +61,7 @@ li {
   counter-increment: listCounter;
 }
 li::after {
-  content: "[" counter(listCounter) "] == ["
-               counter(listCounter, upper-roman) "]";
+  content: "[" counter(listCounter) "] == [" counter(listCounter, upper-roman) "]";
 }
 ```
 
@@ -94,8 +93,11 @@ li {
 }
 
 li::after {
-  content: "[" counter(count, decimal-leading-zero) "] == ["
-               counter(count, lower-alpha) "]";
+  content: "[" counter(count, decimal-leading-zero) "] == [" counter(
+      count,
+      lower-alpha
+    )
+    "]";
 }
 ```
 
diff --git a/files/fr/web/css/counters/index.md b/files/fr/web/css/counters/index.md
index 07645c7ac0c259..3b1dcd521d28f9 100644
--- a/files/fr/web/css/counters/index.md
+++ b/files/fr/web/css/counters/index.md
@@ -53,25 +53,25 @@ Un compteur n'est pas visible en tant que tel. Les fonctions `counters()` et [`c
 ```html
 <ol>
   <li>
-     <ol>
-        <li></li>
-        <li></li>
-        <li></li>
-      </ol>
+    <ol>
+      <li></li>
+      <li></li>
+      <li></li>
+    </ol>
   </li>
   <li></li>
   <li></li>
   <li>
-     <ol>
-        <li></li>
-        <li>
-           <ol>
-              <li></li>
-              <li></li>
-              <li></li>
-           </ol>
-        </li>
-      </ol>
+    <ol>
+      <li></li>
+      <li>
+        <ol>
+          <li></li>
+          <li></li>
+          <li></li>
+        </ol>
+      </li>
+    </ol>
   </li>
 </ol>
 ```
@@ -86,10 +86,14 @@ li {
   counter-increment: listCounter;
 }
 li::marker {
-   content:  counters(listCounter, '.', upper-roman) ') ';
+  content: counters(listCounter, ".", upper-roman) ") ";
 }
 li::before {
-  content:  counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ;
+  content: counters(listCounter, ".") " == " counters(
+      listCounter,
+      ".",
+      lower-roman
+    );
 }
 ```
 
@@ -104,25 +108,25 @@ li::before {
 ```html
 <ol>
   <li>
-     <ol>
-        <li></li>
-        <li></li>
-        <li></li>
-      </ol>
+    <ol>
+      <li></li>
+      <li></li>
+      <li></li>
+    </ol>
   </li>
   <li></li>
   <li></li>
   <li>
-     <ol>
-        <li></li>
-        <li>
-           <ol>
-              <li></li>
-              <li></li>
-              <li></li>
-           </ol>
-        </li>
-      </ol>
+    <ol>
+      <li></li>
+      <li>
+        <ol>
+          <li></li>
+          <li></li>
+          <li></li>
+        </ol>
+      </li>
+    </ol>
   </li>
 </ol>
 ```
@@ -137,10 +141,14 @@ li {
   counter-increment: count;
 }
 li::marker {
-   content: counters(count, '.', upper-alpha) ') ';
+  content: counters(count, ".", upper-alpha) ") ";
 }
 li::before {
-  content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha);
+  content: counters(count, ".", decimal-leading-zero) " == " counters(
+      count,
+      ".",
+      lower-alpha
+    );
 }
 ```
 
diff --git a/files/fr/web/css/cross-fade/index.md b/files/fr/web/css/cross-fade/index.md
index 4dfe04406c48c3..5f44499cafad5d 100644
--- a/files/fr/web/css/cross-fade/index.md
+++ b/files/fr/web/css/cross-fade/index.md
@@ -101,14 +101,8 @@ Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. Si l
 .crossfade {
   width: 300px;
   height: 300px;
-  background-image: -webkit-cross-fade(
-    url('br.png'),
-    url('tr.png'),
-    75%);
-  background-image: cross-fade(
-    url('br.png'),
-    url('tr.png'),
-    75%);
+  background-image: -webkit-cross-fade(url("br.png"), url("tr.png"), 75%);
+  background-image: cross-fade(url("br.png"), url("tr.png"), 75%);
 }
 ```
 
@@ -127,10 +121,10 @@ Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. Si l
 ## Voir aussi
 
 - [`<image>`](/fr/docs/Web/CSS/image)
-- [`url()`](/fr/docs/Web/CSS/url())
-- [`image()`](/fr/docs/Web/CSS/image/image())
-- [`image-set()`](/fr/docs/Web/CSS/image/image-set())
-- [`element()`](/fr/docs/Web/CSS/element())
+- [`url()`](</fr/docs/Web/CSS/url()>)
+- [`image()`](</fr/docs/Web/CSS/image/image()>)
+- [`image-set()`](</fr/docs/Web/CSS/image/image-set()>)
+- [`element()`](</fr/docs/Web/CSS/element()>)
 - [Utiliser les dégradés CSS](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
 - Fonctions de création de dégradés&nbsp;:
   - [`linear-gradient()`](/fr/docs/Web/CSS/gradient/linear-gradient)
diff --git a/files/fr/web/css/css_animations/tips/index.md b/files/fr/web/css/css_animations/tips/index.md
index 3f85266c3b044a..8c0e93f8d707ab 100644
--- a/files/fr/web/css/css_animations/tips/index.md
+++ b/files/fr/web/css/css_animations/tips/index.md
@@ -28,14 +28,21 @@ Tout d'abord, on définit l'animation avec des règles CSS (certaines règles su
   padding-bottom: 4px;
   color: white;
   background-color: darkgreen;
-  font: 14px "Open Sans", "Arial", sans-serif;
+  font:
+    14px "Open Sans",
+    "Arial",
+    sans-serif;
 }
 ```
 
 ```css
 @keyframes colorchange {
-  0% { background: yellow }
-  100% { background: blue }
+  0% {
+    background: yellow;
+  }
+  100% {
+    background: blue;
+  }
 }
 
 .box {
@@ -58,8 +65,7 @@ Si on n'utilise que ces règles, la boîte n'est pas animée lorsqu'elle s'affic
 Voici le fragment de HTML où on utilise un élément {{HTMLElement("div")}} qu'on veut animer et un bouton pour lancer (ou relancer) l'animation.
 
 ```html
-<div class="box">
-</div>
+<div class="box"></div>
 
 <div class="runButton" onclick="play()">Cliquer pour lancer l'animation</div>
 ```
@@ -71,8 +77,8 @@ Enfin, voyons le JavaScript qui sera utilisé. Cette technique repose principale
 ```js
 function play() {
   document.querySelector(".box").className = "box";
-  window.requestAnimationFrame(function(time) {
-    window.requestAnimationFrame(function(time) {
+  window.requestAnimationFrame(function (time) {
+    window.requestAnimationFrame(function (time) {
       document.querySelector(".box").className = "box changing";
     });
   });
@@ -141,15 +147,15 @@ Ces pistes sont utilisées dans la démonstration suivante :
 ### JavaScript
 
 ```js
-let watchme = document.getElementById('watchme')
+let watchme = document.getElementById("watchme");
 
-watchme.className = 'slidein'
+watchme.className = "slidein";
 const listener = (e) => {
-  watchme.className = 'slidein stopped'
-}
-watchme.addEventListener('click', () =>
-  watchme.addEventListener('animationiteration', listener, false)
-)
+  watchme.className = "slidein stopped";
+};
+watchme.addEventListener("click", () =>
+  watchme.addEventListener("animationiteration", listener, false),
+);
 ```
 
 ### Résultat
diff --git a/files/fr/web/css/css_animations/using_css_animations/index.md b/files/fr/web/css/css_animations/using_css_animations/index.md
index c619ab637674f4..1b86b4020902cc 100644
--- a/files/fr/web/css/css_animations/using_css_animations/index.md
+++ b/files/fr/web/css/css_animations/using_css_animations/index.md
@@ -83,9 +83,11 @@ Les étapes (_keyframes_) de l'animation sont définies via la règle @ {{cssxre
 La seconde, et dernière, étape, se produit à 100% d'avancement (dans l'exemple, on utilise l'alias `to`). Pour cet état, la marge gauche vaut 0% et la largeur de l'élément vaut 100%. De cette façon le contenu finit sa course contre le borde gauche de la zone de contenu.
 
 ```html
-<p>The Caterpillar and Alice looked at each other for some time in silence:
-at last the Caterpillar took the hookah out of its mouth, and addressed
-her in a languid, sleepy voice.</p>
+<p>
+  The Caterpillar and Alice looked at each other for some time in silence: at
+  last the Caterpillar took the hookah out of its mouth, and addressed her in a
+  languid, sleepy voice.
+</p>
 ```
 
 > **Note :** Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.
@@ -130,9 +132,11 @@ p {
 ```
 
 ```html hidden
-<p>The Caterpillar and Alice looked at each other for some time in silence:
-at last the Caterpillar took the hookah out of its mouth, and addressed
-her in a languid, sleepy voice.</p>
+<p>
+  The Caterpillar and Alice looked at each other for some time in silence: at
+  last the Caterpillar took the hookah out of its mouth, and addressed her in a
+  languid, sleepy voice.
+</p>
 ```
 
 Cette nouvelle étape indique au navigateur que, lorsqu'on atteint 75% d'avancement, il faut que la marge à gauche soit de 25% et que la largeur du paragraphe représente 150% de la largeur de l'élément englobant.
@@ -168,9 +172,11 @@ p {
 ```
 
 ```html hidden
-<p>The Caterpillar and Alice looked at each other for some time in silence:
-at last the Caterpillar took the hookah out of its mouth, and addressed
-her in a languid, sleepy voice.</p>
+<p>
+  The Caterpillar and Alice looked at each other for some time in silence: at
+  last the Caterpillar took the hookah out of its mouth, and addressed her in a
+  languid, sleepy voice.
+</p>
 ```
 
 {{EmbedLiveSample("Répéter_une_animation","100%","250")}}
@@ -203,9 +209,11 @@ p {
 ```
 
 ```html hidden
-<p>The Caterpillar and Alice looked at each other for some time in silence:
-at last the Caterpillar took the hookah out of its mouth, and addressed
-her in a languid, sleepy voice.</p>
+<p>
+  The Caterpillar and Alice looked at each other for some time in silence: at
+  last the Caterpillar took the hookah out of its mouth, and addressed her in a
+  languid, sleepy voice.
+</p>
 ```
 
 {{EmbedLiveSample("Obtenir_un_effet_aller-retour","100%","250")}}
@@ -281,13 +289,13 @@ On commence par rédiger le CSS pour l'animation. Ici, l'animation durera 3 seco
 
 @keyframes slidein {
   from {
-    margin-left:100%;
-    width:300%
+    margin-left: 100%;
+    width: 300%;
   }
 
   to {
-    margin-left:0%;
-    width:100%;
+    margin-left: 0%;
+    width: 100%;
   }
 }
 ```
@@ -316,7 +324,7 @@ Les événements sont transmis à la fonction `listener()` décrite ici :
 ```js
 function listener(event) {
   var l = document.createElement("li");
-  switch(event.type) {
+  switch (event.type) {
     case "animationstart":
       l.innerHTML = "Début : durée écoulée : " + event.elapsedTime;
       break;
diff --git a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md
index 414bce7a7cb37f..95cff31e1a565a 100644
--- a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md
+++ b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md
@@ -86,7 +86,8 @@ Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur
   background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
   background-size: contain;
   border: 2px solid darkgray;
-  color: #000; text-shadow: 1px 1px 0 #fff;
+  color: #000;
+  text-shadow: 1px 1px 0 #fff;
 }
 ```
 
diff --git a/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md b/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
index b59bb74a3d786f..b689b685337055 100644
--- a/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
+++ b/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
@@ -20,7 +20,7 @@ Cela fonctionne aussi bien avec la propriété raccourcie [`background`](/fr/doc
 
 ## Exemples
 
-Dans cet exemple, on cumule trois arrière-plans&nbsp;: le logo de Firefox, une image de bulles et un dégradé linéaire (cf. [`linear-gradient`](/fr/docs/Web/CSS/gradient/linear-gradient())).
+Dans cet exemple, on cumule trois arrière-plans&nbsp;: le logo de Firefox, une image de bulles et un dégradé linéaire (cf. [`linear-gradient`](</fr/docs/Web/CSS/gradient/linear-gradient()>)).
 
 ### HTML
 
@@ -34,10 +34,12 @@ Dans cet exemple, on cumule trois arrière-plans&nbsp;: le logo de Firefox, une
 .multi-bg-example {
   width: 100%;
   height: 400px;
-  background-image: url(firefox.png), url(bubbles.png),
-                    linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
   background-repeat: no-repeat, no-repeat, no-repeat;
-  background-position: bottom right, left, right;
+  background-position:
+    bottom right,
+    left,
+    right;
 }
 ```
 
diff --git a/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.md b/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.md
index 301cd2603f3a2a..8f216f6e15837c 100644
--- a/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.md
+++ b/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.md
@@ -13,8 +13,8 @@ La fusion des marges se produit si on a l'un de ces trois cas :
   - : Les marges des éléments voisins adjacents sont fusionnés (sauf quand le dernier voisin doit passer à la ligne pour [dégager](/fr/docs/Web/CSS/clear) les flottements). Ainsi :
 
     ```html
-     <p>La marge basse de ce paragraphe est fusionnée…</p>
-     <p>… avec la marge haute de celui-ci.</p>
+    <p>La marge basse de ce paragraphe est fusionnée…</p>
+    <p>… avec la marge haute de celui-ci.</p>
     ```
 
 - Aucun contenu séparant le parent et ses descendants
@@ -36,14 +36,20 @@ Les marges des éléments [flottants](/fr/docs/Web/CSS/float) et [positionnés d
 
 ```html
 <p>La marge basse de ce paragraphe est fusionnée…</p>
-<p>… avec la marge haute de ce paragraphe. On a donc une marge
-   de <code>1.2rem</code> entre les deux.</p>
-
-<div>Cet élément contient deux paragraphes !
-  <p>Celui-ci a une marge de <code>.4rem</code> par rapport au texte ci-dessus.</p>
-  <p>La marge basse de cet élément fusionne avec la marge basse
-     de l'élément parent. On a donc <code>2rem</code> de marge.
+<p>
+  … avec la marge haute de ce paragraphe. On a donc une marge de
+  <code>1.2rem</code> entre les deux.
 </p>
+
+<div>
+  Cet élément contient deux paragraphes !
+  <p>
+    Celui-ci a une marge de <code>.4rem</code> par rapport au texte ci-dessus.
+  </p>
+  <p>
+    La marge basse de cet élément fusionne avec la marge basse de l'élément
+    parent. On a donc <code>2rem</code> de marge.
+  </p>
 </div>
 
 <p>Bip bap bop.</p>
@@ -58,7 +64,7 @@ div {
 }
 
 p {
-  margin: .4rem 0 1.2rem 0;
+  margin: 0.4rem 0 1.2rem 0;
   background: yellow;
 }
 ```
diff --git a/files/fr/web/css/css_colors/applying_color/index.md b/files/fr/web/css/css_colors/applying_color/index.md
index a462dd0dd74791..d6a060c177691e 100644
--- a/files/fr/web/css/css_colors/applying_color/index.md
+++ b/files/fr/web/css/css_colors/applying_color/index.md
@@ -149,14 +149,19 @@ Voici quelques exemples utilisant la notation HSL :
 ```css hidden
 table {
   border: 1px solid black;
-  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
+  font:
+    16px "Open Sans",
+    Helvetica,
+    Arial,
+    sans-serif;
   border-spacing: 0;
   border-collapse: collapse;
 }
 
-th, td {
+th,
+td {
   border: 1px solid black;
-  padding:4px 6px;
+  padding: 4px 6px;
   text-align: left;
 }
 
@@ -225,14 +230,10 @@ Voici le fragment de code HTML utilisé pour cet exemple :
 ```html
 <div class="conteneur">
   <div class="boite boiteGauche">
-    <p>
-      Voici la première boîte.
-    </p>
+    <p>Voici la première boîte.</p>
   </div>
   <div class="boite boiteDroite">
-    <p>
-      Voici la seconde boîte.
-    </p>
+    <p>Voici la seconde boîte.</p>
   </div>
 </div>
 ```
@@ -267,7 +268,10 @@ Les deux boîtes colorées possèdent un certain nombre de propriétés communes
   height: 100px;
   margin: 0;
   padding: 4px 6px;
-  font: 28px "Marker Felt", "Zapfino", cursive;
+  font:
+    28px "Marker Felt",
+    "Zapfino",
+    cursive;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -330,7 +334,7 @@ Voici le fragment HTML qui permet de créer une boîte qui contient un sélecteu
 ```html
 <div id="box">
   <label for="colorPicker">Couleur de la bordure :</label>
-  <input type="color" value="#8888ff" id="colorPicker">
+  <input type="color" value="#8888ff" id="colorPicker" />
   <p id="output"></p>
 </div>
 ```
@@ -345,7 +349,11 @@ La feuille CSS détermine la taille de la boîte et une mise en forme simple. La
   height: 200px;
   border: 2px solid rgb(245, 220, 225);
   padding: 4px 6px;
-  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
+  font:
+    16px "Lucida Grande",
+    "Helvetica",
+    "Arial",
+    "sans-serif";
 }
 ```
 
@@ -360,13 +368,21 @@ let output = document.getElementById("output");
 
 box.style.borderColor = colorPicker.value;
 
-colorPicker.addEventListener("input", function(event) {
-  box.style.borderColor = event.target.value;
-}, false);
-
-colorPicker.addEventListener("change", function(event) {
-  output.innerText = "Couleur choisie : " + colorPicker.value;
-}, false);
+colorPicker.addEventListener(
+  "input",
+  function (event) {
+    box.style.borderColor = event.target.value;
+  },
+  false,
+);
+
+colorPicker.addEventListener(
+  "change",
+  function (event) {
+    output.innerText = "Couleur choisie : " + colorPicker.value;
+  },
+  false,
+);
 ```
 
 L'évènement [`input`](/fr/docs/Web/API/HTMLElement/input_event) est envoyé chaque fois que la valeur de l'élément change, c'est-à-dire chaque fois que l'utilisateur ajuste la couleur via le sélecteur. Pour chacun de ces évènements, on modifie la couleur de la bordure afin qu'elle corresponde à celle du sélecteur.
diff --git a/files/fr/web/css/css_counter_styles/using_css_counters/index.md b/files/fr/web/css/css_counter_styles/using_css_counters/index.md
index 5d2184e82258b3..aa755cebbe8c85 100644
--- a/files/fr/web/css/css_counter_styles/using_css_counters/index.md
+++ b/files/fr/web/css/css_counter_styles/using_css_counters/index.md
@@ -34,11 +34,11 @@ Dans l'exemple qui suit, la feuille de style CSS préfixe chaque titre de niveau
 
 ```css
 body {
-  counter-reset: section;                    /* On initialise le compteur à 0 */
+  counter-reset: section; /* On initialise le compteur à 0 */
 }
 
 h3::before {
-  counter-increment: section;                /* On incrémente le compteur section */
+  counter-increment: section; /* On incrémente le compteur section */
   content: "Section " counter(section) " : "; /* On affiche le compteur */
 }
 ```
@@ -63,17 +63,17 @@ Un compteur CSS est particulièrement utile lorsqu'il s'agit de gérer les liste
 
 ```css
 ol {
-  counter-reset: section;                /* On crée une nouvelle instance du
+  counter-reset: section; /* On crée une nouvelle instance du
                                             compteur section avec chaque ol */
   list-style-type: none;
 }
 
 li::before {
-  counter-increment: section;            /* On incrémente uniquement cette
+  counter-increment: section; /* On incrémente uniquement cette
                                             instance du compteur */
-  content: counters(section,".") " ";    /* On ajoute la valeur de toutes les
+  content: counters(section, ".") " "; /* On ajoute la valeur de toutes les
                                             instances séparées par ".". */
-                                         /* Si on doit supporter < IE8 il faudra
+  /* Si on doit supporter < IE8 il faudra
                                             faire attention à ce qu'il n'y ait
                                             aucun blanc après ',' */
 }
@@ -81,7 +81,7 @@ li::before {
 
 ### HTML
 
-```html
+```html-nolint
 <ol>
   <li>item</li>          <!-- 1     -->
   <li>item               <!-- 2     -->
diff --git a/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md b/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md
index 3cd249e4887b6a..c0f0fe1af2c5e1 100644
--- a/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md
+++ b/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md
@@ -101,7 +101,7 @@ On peut également permettre aux deux côtés de grandir/rétrécir proportionne
 }
 ```
 
-On pourrait aussi utiliser différents coefficients {{cssxref("flex-grow")}} pour chaque côté. Utiliser `flex: 1` pour le côté avec l'image et `flex: 3` pour le côté avec la description signifierait qu'ils partiraient tous les deux avec une base `flex-basis`  `0` et que l'espace serait distribué dans des proportions différentes correspondantes aux valeurs de `flex-grow`. Les propriétés flexibles que nous utilisons ici sont décrites en détail dans le guide [Contrôler les proportions des éléments flexibles le long de l'axe principal](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax).
+On pourrait aussi utiliser différents coefficients {{cssxref("flex-grow")}} pour chaque côté. Utiliser `flex: 1` pour le côté avec l'image et `flex: 3` pour le côté avec la description signifierait qu'ils partiraient tous les deux avec une base `flex-basis` `0` et que l'espace serait distribué dans des proportions différentes correspondantes aux valeurs de `flex-grow`. Les propriétés flexibles que nous utilisons ici sont décrites en détail dans le guide [Contrôler les proportions des éléments flexibles le long de l'axe principal](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax).
 
 ```css
 .media .content {
diff --git a/files/fr/web/css/css_flow_layout/introduction_to_formatting_contexts/index.md b/files/fr/web/css/css_flow_layout/introduction_to_formatting_contexts/index.md
index 535ef4051bc73f..25cec38b72fa63 100644
--- a/files/fr/web/css/css_flow_layout/introduction_to_formatting_contexts/index.md
+++ b/files/fr/web/css/css_flow_layout/introduction_to_formatting_contexts/index.md
@@ -75,7 +75,7 @@ Dans ce guide, nous avons approfondi les notions relatives aux contextes de form
 
 ## Voir aussi
 
-- [Contexte de formatage de bloc (ou *Block Formatting Context* (BFC) en anglais)](/fr/docs/Web/CSS/Block_formatting_context)
+- [Contexte de formatage de bloc (ou _Block Formatting Context_ (BFC) en anglais)](/fr/docs/Web/CSS/Block_formatting_context)
 - [Modèle de formatage visuel](/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle)
 - [Modèle de boîte CSS](/fr/docs/Web/CSS/Modèle_de_boîte_CSS)
 
diff --git a/files/fr/web/css/css_fonts/index.md b/files/fr/web/css/css_fonts/index.md
index c9e59a3aafb0eb..6ac2ab990ac3c3 100644
--- a/files/fr/web/css/css_fonts/index.md
+++ b/files/fr/web/css/css_fonts/index.md
@@ -18,7 +18,7 @@ L'exemple qui suit illustre l'utilisation simple de propriétés relatives aux p
 p {
   width: 600px;
   margin: 0 auto;
-  font-family: "Helvetica Neue", "Arial",  sans-serif;
+  font-family: "Helvetica Neue", "Arial", sans-serif;
   font-style: italic;
   font-weight: 100;
   font-variant-ligatures: normal;
@@ -31,9 +31,9 @@ p {
 
 ```html
 <p>
-   Alice ne fut pas très-étonnée, tant elle commençait à s’habituer aux
-   événements extraordinaires. Tandis qu’elle regardait encore l’endroit
-   que le Chat venait de quitter, il reparut tout à coup.
+  Alice ne fut pas très-étonnée, tant elle commençait à s’habituer aux
+  événements extraordinaires. Tandis qu’elle regardait encore l’endroit que le
+  Chat venait de quitter, il reparut tout à coup.
 </p>
 ```
 
diff --git a/files/fr/web/css/css_fonts/opentype_fonts_guide/index.md b/files/fr/web/css/css_fonts/opentype_fonts_guide/index.md
index 08fe04964120f7..593490fc3b63f0 100644
--- a/files/fr/web/css/css_fonts/opentype_fonts_guide/index.md
+++ b/files/fr/web/css/css_fonts/opentype_fonts_guide/index.md
@@ -147,7 +147,9 @@ Selon la spécification, on peut fournir le code à quatre caractères de la car
 
 ```css
 .no-ligatures {
-  font-feature-settings: "liga" 0, "dlig" 0;
+  font-feature-settings:
+    "liga" 0,
+    "dlig" 0;
 }
 ```
 
@@ -164,14 +166,14 @@ Ainsi, les petites capitales peuvent être activées de différentes façons mai
 
 ```css
 .small-caps {
-   font-feature-settings: "smcp", "c2sc";
+  font-feature-settings: "smcp", "c2sc";
 }
 
 @supports (font-variant-caps: all-small-caps) {
-   .small-caps {
-       font-feature-settings: normal;
-       font-variant-caps: all-small-caps;
-   }
+  .small-caps {
+    font-feature-settings: normal;
+    font-variant-caps: all-small-caps;
+  }
 }
 ```
 
diff --git a/files/fr/web/css/css_fonts/variable_fonts_guide/index.md b/files/fr/web/css/css_fonts/variable_fonts_guide/index.md
index ef69fce85b47b1..04c6d8d9bf495f 100644
--- a/files/fr/web/css/css_fonts/variable_fonts_guide/index.md
+++ b/files/fr/web/css/css_fonts/variable_fonts_guide/index.md
@@ -51,11 +51,13 @@ Cette propriété fut le premier mécanisme implémenté pour tester les premiè
 
 1. Les noms d'axes utilisés avec `font-variation-settings` sont sensibles à la casse. Les noms des axes enregistrés doivent être écrits en minuscules et les noms des axes spécifiques doivent être écrits en majuscules. Ainsi, dans ce cas :
 
-    ```css
-    font-variation-settings: 'wght' 375, 'GRAD' 88;
-    ```
+   ```css
+   font-variation-settings:
+     "wght" 375,
+     "GRAD" 88;
+   ```
 
-    `wght` correspondra à l'axe enregistré du même nom et `GRAD` à un axe spécifique.
+   `wght` correspondra à l'axe enregistré du même nom et `GRAD` à un axe spécifique.
 
 2. Si on a défini des valeurs avec `font-variation-settings` et qu'on souhaite changer une de ces valeurs, il sera nécessaire de redéclarer l'ensemble des valeurs (de la même façon qu'on doit redéclarer l'ensemble des caractéristiques OpenType avec {{cssxref("font-feature-settings")}}). Il est possible de contourner cet écueil en utilisant [des propriétés CSS personnalisées](/fr/docs/Web/CSS/Using_CSS_custom_properties) pour les valeurs individuelles et en modifiant uniquement la valeur d'une des propriétés personnalisée (cf. l'exemple en fin d'article).
 
@@ -68,7 +70,7 @@ On notera qu'il n'est pas possible d'utiliser la déclaration `@font-face` afin
 ```css
 font-weight: 375;
 
-font-variation-settings: 'wght' 375;
+font-variation-settings: "wght" 375;
 ```
 
 Vous pouvez éditer l'exemple CSS suivant pour voir l'effet sur la graisse de la police.
@@ -84,7 +86,7 @@ La largeur (indiquée par l'étiquette `wdth`) correspond à l'axe selon lequel
 ```css
 font-stretch: 115%;
 
-font-variation-settings: 'wdth' 115;
+font-variation-settings: "wdth" 115;
 ```
 
 L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.
@@ -100,7 +102,7 @@ En CSS, l'italique est appliqué grâce à la propriété {{cssxref("font-style"
 ```css
 font-style: italic;
 
-font-variation-settings: 'ital' 1;
+font-variation-settings: "ital" 1;
 
 font-synthesis: none;
 ```
@@ -118,7 +120,7 @@ La pente (indiquée par l'étiquette `slnt`), également appelée « oblique »,
 ```css
 font-style: oblique 14deg;
 
-font-variation-settings: 'slnt' 14;
+font-variation-settings: "slnt" 14;
 ```
 
 L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.
@@ -138,7 +140,7 @@ Une nouvelle propriété CSS a été créée afin de prendre en charge cet axe a
 ```css
 font-optical-sizing: auto;
 
-font-variation-settings: 'opsz' 36;
+font-variation-settings: "opsz" 36;
 ```
 
 L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.
@@ -154,7 +156,7 @@ Les axes spécifiques sont introduits spécifiquement par les concepteurs de pol
 Le grade est une variation qui consiste à épaissir certains des traits des glyphes sans agrandir la largeur totale du glyphe. En augmentant le grade, on a ainsi un caractère plus « dense ». Il ne faut pas confondre le corps et le grade : le premier augmente la taille générale, largeur incluse, des glyphes tandis que le second ne modifie pas l'espace physique occupé par le caractère. Le grade est un axe spécifique plutôt populaire car il permet de faire varier la densité apparente du texte sans modifier sa largeur et ainsi il évite de générer un décalage du texte.
 
 ```css
-font-variation-settings: 'GRAD' 88;
+font-variation-settings: "GRAD" 88;
 ```
 
 L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.
@@ -171,11 +173,11 @@ La syntaxe de base est la même mais on peut indiquer la technologie utilisée p
 
 ```css
 @font-face {
- font-family: 'MyVariableFontName';
- src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
- font-weight: 125 950;
- font-stretch: 75% 125%;
- font-style: normal;
+  font-family: "MyVariableFontName";
+  src: "path/to/font/file/myvariablefont.woff2" format("woff2-variations");
+  font-weight: 125 950;
+  font-stretch: 75% 125%;
+  font-style: normal;
 }
 ```
 
@@ -183,11 +185,11 @@ La syntaxe de base est la même mais on peut indiquer la technologie utilisée p
 
 ```css
 @font-face {
- font-family: 'MyVariableFontName';
- src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
- font-weight: 125 950;
- font-stretch: 75% 125%;
- font-style: oblique 0deg 20deg;
+  font-family: "MyVariableFontName";
+  src: "path/to/font/file/myvariablefont.woff2" format("woff2-variations");
+  font-weight: 125 950;
+  font-stretch: 75% 125%;
+  font-style: oblique 0deg 20deg;
 }
 ```
 
@@ -197,11 +199,11 @@ La syntaxe de base est la même mais on peut indiquer la technologie utilisée p
 
 ```css
 @font-face {
- font-family: 'MyVariableFontName';
- src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
- font-weight: 125 950;
- font-stretch: 75% 125%;
- font-style: italic;
+  font-family: "MyVariableFontName";
+  src: "path/to/font/file/myvariablefont.woff2" format("woff2-variations");
+  font-weight: 125 950;
+  font-stretch: 75% 125%;
+  font-style: italic;
 }
 ```
 
@@ -209,11 +211,11 @@ La syntaxe de base est la même mais on peut indiquer la technologie utilisée p
 
 ```css
 @font-face {
- font-family: 'MyVariableFontName';
- src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
- font-weight: 125 950;
- font-stretch: 75% 125%;
- font-style: oblique 0deg 12deg;
+  font-family: "MyVariableFontName";
+  src: "path/to/font/file/myvariablefont.woff2" format("woff2-variations");
+  font-weight: 125 950;
+  font-stretch: 75% 125%;
+  font-style: oblique 0deg 12deg;
 }
 ```
 
@@ -227,13 +229,13 @@ La prise en charge des polices variables peut être vérifié grâce à {{cssxre
 
 ```css
 h1 {
- font-family: some-non-variable-font-family;
+  font-family: some-non-variable-font-family;
 }
 
-@supports (font-variation-settings: 'wdth' 115) {
- h1 {
+@supports (font-variation-settings: "wdth" 115) {
+  h1 {
     font-family: some-variable-font-family;
- }
+  }
 }
 ```
 
diff --git a/files/fr/web/css/css_grid_layout/auto-placement_in_grid_layout/index.md b/files/fr/web/css/css_grid_layout/auto-placement_in_grid_layout/index.md
index 4919c3b27d1c73..b9cd8b950be126 100644
--- a/files/fr/web/css/css_grid_layout/auto-placement_in_grid_layout/index.md
+++ b/files/fr/web/css/css_grid_layout/auto-placement_in_grid_layout/index.md
@@ -13,7 +13,9 @@ En plus de pouvoir placer des objets de façon précise sur une grille, la spéc
 ## Placement automatique
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -61,7 +63,9 @@ Par défaut, les lignes implicites créées automatiquement ont une taille autom
 Il est toutefois possible de contrôler la taille de ces lignes grâce à la propriété `grid-auto-rows`. Ainsi, si on veut que les lignes créées automatiquement mesurent 100 pixels de haut, on utilisera :
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -104,7 +108,9 @@ Il est toutefois possible de contrôler la taille de ces lignes grâce à la pro
 On peut utiliser la fonction {{cssxref("minmax","minmax()")}} pour la valeur de {{cssxref("grid-auto-rows")}} afin de créer des lignes avec une taille minimale mais qui puissent être plus grandes si le contenu est plus grand que cette taille minimale.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -126,13 +132,9 @@ On peut utiliser la fonction {{cssxref("minmax","minmax()")}} pour la valeur de
   <div>Un</div>
   <div>Deux</div>
   <div>Trois</div>
-  <div>Quatre
-    <br>Cette cellule
-    <br>a du contenu
-    <br>supplémentaire
-    <br>et max vaut auto
-    <br>afin que la ligne
-    <br>se développe.
+  <div>
+    Quatre <br />Cette cellule <br />a du contenu <br />supplémentaire <br />et
+    max vaut auto <br />afin que la ligne <br />se développe.
   </div>
   <div>Five</div>
 </div>
@@ -154,33 +156,35 @@ On peut utiliser la fonction {{cssxref("minmax","minmax()")}} pour la valeur de
 On peut aussi passer en argument une liste de pistes qui se répèteront. Dans l'exemple ci-après, on crée une piste implicite pour une ligne de 100 pixels et une seconde de `200px`. Ce motif sera utilisé tant que du contenu sera ajouté à la grille implicite.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
-   border: 2px solid #f76707;
-   border-radius: 5px;
-   background-color: #fff4e6;
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
 }
 
 .wrapper > div {
-   border: 2px solid #ffa94d;
-   border-radius: 5px;
-   background-color: #ffd8a8;
-   padding: 1em;
-   color: #d9480f;
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
 }
 ```
 
 ```html
 <div class="wrapper">
-   <div>Un</div>
-   <div>Deux</div>
-   <div>Trois</div>
-   <div>Quatre</div>
-   <div>Cinq</div>
-   <div>Six</div>
-   <div>Sept</div>
-   <div>Huit</div>
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+  <div>Six</div>
+  <div>Sept</div>
+  <div>Huit</div>
 </div>
 ```
 
@@ -212,7 +216,9 @@ Dans le prochain exemple, on crée une grille avec trois lignes qui mesurent cha
 ```
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -257,7 +263,9 @@ Le placement des éléments qui n'ont pas eu d'ordre défini sont placés selon
 La grille commencera par placer les éléments pour lesquels on a défini une position. Dans l'exemple qui suit, on a une grille avec 12 éléments, l'élément 2 et l'élément 5 sont placés en utilisant les lignes. On put voir comment ces deux éléments sont placés et comment les autres sont placés automatiquement dans les espaces restants. Les objets placés automatiquement seront placés avant les éléments qui sont placés, dans l'ordre du DOM.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -317,7 +325,9 @@ On peut utiliser les propriétés de placement tout en tirant parti du placement
 On peut voir coment cela laisse des espaces dans la grille car lorsqu'un élément placé automatiquement n'a pas suffisamment de place sur une piste, une nouvelle ligne sera créée jusqu'à ce que l'élément ait la place.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 .wrapper {
   border: 2px solid #f76707;
   border-radius: 5px;
@@ -357,7 +367,7 @@ On peut voir coment cela laisse des espaces dans la grille car lorsqu'un éléme
   grid-auto-rows: 100px;
   grid-gap: 10px;
 }
-.wrapper div:nth-child(4n+1) {
+.wrapper div:nth-child(4n + 1) {
   grid-column-end: span 2;
   grid-row-end: span 2;
   background-color: #ffa94d;
@@ -383,7 +393,9 @@ Pour cela, sur le conteneur, on ajoute la propriété {{cssxref("grid-auto-flow"
 Avec cette valeur, la grille cherchera donc à combler les espaces qu'elle a laissés quitte à ne pas respecter l'ordre du DOM. En revanche, l'ordre de la navigation au clavier (_tab order_) suivra toujours l'ordre du document. Nous étudierons cet aspect plus en détails dans [un article sur l'accessibilité](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité).
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 .wrapper {
   border: 2px solid #f76707;
   border-radius: 5px;
@@ -417,7 +429,7 @@ Avec cette valeur, la grille cherchera donc à combler les espaces qu'elle a lai
 ```
 
 ```css
-.wrapper div:nth-child(4n+1) {
+.wrapper div:nth-child(4n + 1) {
   grid-column-end: span 2;
   grid-row-end: span 2;
   background-color: #ffa94d;
@@ -487,16 +499,24 @@ Le placement automatique peut être utile lorsqu'on a un ensemble d'objets qui s
 
 ```html
 <ul class="wrapper">
-  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
-  <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
-  <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
-  <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
-  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
-  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
-  <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
-  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
-  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
-  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder" /></li>
+  <li class="landscape">
+    <img src="http://placehold.it/350x200" alt="placeholder" />
+  </li>
+  <li class="landscape">
+    <img src="http://placehold.it/350x200" alt="placeholder" />
+  </li>
+  <li class="landscape">
+    <img src="http://placehold.it/350x200" alt="placeholder" />
+  </li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder" /></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder" /></li>
+  <li class="landscape">
+    <img src="http://placehold.it/350x200" alt="placeholder" />
+  </li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder" /></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder" /></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder" /></li>
 </ul>
 ```
 
@@ -507,7 +527,9 @@ Le placement automatique peut également aider à disposer des éléments d'inte
 ### Autre exemple
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
diff --git a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
index 9e3d591e71e9ac..814189426e8c43 100644
--- a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
+++ b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
@@ -395,14 +395,15 @@ La fonction [`minmax()`](/fr/docs/Web/CSS/minmax) permet ce comportement. Dans l
 
 ```html
 <div class="wrapper">
-   <div>Un</div>
-   <div>Deux
-     <p>Davantage de contenu.</p>
-     <p>On dépasse les 100 pixels.</p>
-   </div>
-   <div>Trois</div>
-   <div>Quatre</div>
-   <div>Cinq</div>
+  <div>Un</div>
+  <div>
+    Deux
+    <p>Davantage de contenu.</p>
+    <p>On dépasse les 100 pixels.</p>
+  </div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
 </div>
 ```
 
@@ -750,11 +751,11 @@ On peut contrôler l'ordre dans lequel les éléments s'empilent en utilisant la
 
 ```html hidden
 <div class="wrapper">
-    <div class="box box1">Un</div>
-    <div class="box box2">Deux</div>
-   <div class="box box3">Trois</div>
-   <div class="box box4">Quatre</div>
-   <div class="box box5">Cinq</div>
+  <div class="box box1">Un</div>
+  <div class="box box2">Deux</div>
+  <div class="box box3">Trois</div>
+  <div class="box box4">Quatre</div>
+  <div class="box box5">Cinq</div>
 </div>
 ```
 
diff --git a/files/fr/web/css/css_grid_layout/box_alignment_in_grid_layout/index.md b/files/fr/web/css/css_grid_layout/box_alignment_in_grid_layout/index.md
index 43af1ab66252d0..4e1f21988fd732 100644
--- a/files/fr/web/css/css_grid_layout/box_alignment_in_grid_layout/index.md
+++ b/files/fr/web/css/css_grid_layout/box_alignment_in_grid_layout/index.md
@@ -43,7 +43,9 @@ Dans l'exemple suivant, on a quatre zones sur la grille. On peut utiliser la pro
 - `last baseline`
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -107,7 +109,9 @@ La propriété {{cssxref("align-items")}} définit en fait la valeur de la propr
 Dans le prochain exemple, on utilise la propriété `align-self` afin d'illustrer les différentes valeurs pour l'alignement. La première zone illustre le comportement par défaut pour `align-self` : l'objet est étiré. Le deuxième objet utilise la valeur `start`, le troisième utilise `end` et le quatrième utilise `center`.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -189,7 +193,9 @@ Juste après, on voit le même exemple qu'avec {{cssxref("align-items")}} où on
 Là encore, la valeur par défaut `stretch` pour les objets qui n'ont pas de ratio intrinsèque. Cela signifie que, par défaut, les objets de la grille couvriront l'ensemble de la zone de grille sur laquelle ils sont placés. Dans l'exemple qui suit, le premier objet illustre cet alignement par défaut.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -259,7 +265,9 @@ La propriété {{CSSxRef("place-items")}} est une propriété raccourcie qui syn
 En combinant les propriétés `align-*` et `justify-*`, on peut facilement centrer un objet sur sa zone de grille.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -295,7 +303,7 @@ En combinant les propriétés `align-*` et `justify-*`, on peut facilement centr
 
 ```html
 <div class="wrapper">
- <div class="item1">Objet 1</div>
+  <div class="item1">Objet 1</div>
 </div>
 ```
 
@@ -328,7 +336,9 @@ La propriété `align-content` s'applique sur le conteneur de la grille car elle
 ### Alignement par défaut
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -349,7 +359,7 @@ La propriété `align-content` s'applique sur le conteneur de la grille car elle
 .wrapper {
   display: grid;
   grid-template-columns: repeat(3, 100px);
-  grid-template-rows: repeat(3,100px);
+  grid-template-rows: repeat(3, 100px);
   height: 500px;
   width: 500px;
   grid-gap: 10px;
@@ -388,7 +398,9 @@ La propriété `align-content` s'applique sur le conteneur de la grille car elle
 Si on ajoute `align-content` avec la valeur `end` sur le conteneur, les pistes seront déplacées à la fin du conteneur selon l'axe des colonnes.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -409,7 +421,7 @@ Si on ajoute `align-content` avec la valeur `end` sur le conteneur, les pistes s
 .wrapper {
   display: grid;
   grid-template-columns: repeat(3, 100px);
-  grid-template-rows: repeat(3,100px);
+  grid-template-rows: repeat(3, 100px);
   height: 500px;
   width: 500px;
   grid-gap: 10px;
@@ -449,7 +461,9 @@ Si on ajoute `align-content` avec la valeur `end` sur le conteneur, les pistes s
 Pour cette propriété, on peut également utiliser des valeurs qu'on manipule avec les boîtes flexibles : `space-between`, `space-around` et `space-evenly` qui permettent de répartir l'espace. Si on utilise {{cssxref("align-content")}} avec `space-between` pour notre exemple, on voit alors que les éléments sont espacés de façon équitable.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -470,7 +484,7 @@ Pour cette propriété, on peut également utiliser des valeurs qu'on manipule a
 .wrapper {
   display: grid;
   grid-template-columns: repeat(3, 100px);
-  grid-template-rows: repeat(3,100px);
+  grid-template-rows: repeat(3, 100px);
   height: 500px;
   width: 500px;
   grid-gap: 10px;
@@ -518,7 +532,9 @@ Sur l'axe des lignes, on peut utiliser {{cssxref("justify-content")}} de la mêm
 Avec le même exemple, on utilise {{cssxref("justify-content")}} avec la valeur `space-around`. Là encore, les pistes qui s'étalent sur plus d'une colonne gagnent en largeur.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -539,7 +555,7 @@ Avec le même exemple, on utilise {{cssxref("justify-content")}} avec la valeur
 .wrapper {
   display: grid;
   grid-template-columns: repeat(3, 100px);
-  grid-template-rows: repeat(3,100px);
+  grid-template-rows: repeat(3, 100px);
   height: 500px;
   width: 500px;
   grid-gap: 10px;
@@ -582,7 +598,9 @@ Pour aligner les objets dans une zone, on peut également utiliser des marges au
 Dans l'exemple qui suit, pour l'objet 1, on utilise une marge à gauche avec `auto`. On peut alors voir le contenu poussé à droite de la zone (la marge à gauche occupant le plus d'espace possible).
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -603,7 +621,7 @@ Dans l'exemple qui suit, pour l'objet 1, on utilise une marge à gauche avec `au
 .wrapper {
   display: grid;
   grid-template-columns: repeat(3, 100px);
-  grid-template-rows: repeat(3,100px);
+  grid-template-rows: repeat(3, 100px);
   height: 500px;
   width: 500px;
   grid-gap: 10px;
diff --git a/files/fr/web/css/css_grid_layout/grid_layout_and_accessibility/index.md b/files/fr/web/css/css_grid_layout/grid_layout_and_accessibility/index.md
index 690b6da48555fd..653eebd37586e4 100644
--- a/files/fr/web/css/css_grid_layout/grid_layout_and_accessibility/index.md
+++ b/files/fr/web/css/css_grid_layout/grid_layout_and_accessibility/index.md
@@ -37,7 +37,9 @@ La modification d'ordre appliquée par la grille (ou les boîtes flexibles) est
 Dans cet exemple, on utilise une grille pour organiser un ensemble de boîtes qui contiennent des liens. On utilise les propriétés pour placer les éléments sur des lignes : la première boîte est placée sur la deuxième ligne. Visuellement, cette boîte apparaît désormais comme le quatrième élément de la liste. Mais si on utilise la touche tabulation pour naviguer au clavier parmi les liens, c'est toujours ce lien qui est en premier.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
diff --git a/files/fr/web/css/css_grid_layout/grid_layout_and_progressive_enhancement/index.md b/files/fr/web/css/css_grid_layout/grid_layout_and_progressive_enhancement/index.md
index 63083e42c9e3ae..7404ea50f4e1d1 100644
--- a/files/fr/web/css/css_grid_layout/grid_layout_and_progressive_enhancement/index.md
+++ b/files/fr/web/css/css_grid_layout/grid_layout_and_progressive_enhancement/index.md
@@ -34,7 +34,7 @@ La version implémentée dans Internet Explorer dispose de propriétés supplém
 L'outil _[autoprefixer](https://github.com/postcss/autoprefixer)_ a été mis à jour afin de prendre en charge les versions préfixées par `-ms-` lorsqu'on utilise les nouvelles propriétés. Par défaut, les préfixes liés à la grille sont désactivés mais vous pouvez les activer avec l'option `grid: autoplace`.
 
 ```js
-autoprefixer({ grid: 'autoplace' })
+autoprefixer({ grid: "autoplace" });
 ```
 
 Les préfixes relatifs aux grilles sont désactivés par défaut car certaines propriétés ne peuvent pas être préfixées
@@ -54,7 +54,9 @@ Jusqu'à présent, pour créer une disposition sur plusieurs colonnes, on a util
 Le mode {{cssxref("float")}} ne s'applique plus sur l'objet et on peut utiliser la propriété {{cssxref("align-self")}} afin d'aligner le contenu vers la fin du conteneur.
 
 ```css
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 img {
   max-width: 100%;
   display: block;
@@ -88,12 +90,11 @@ img {
 ```html
 <div class="media">
   <div class="image">
-    <img src="http://placehold.it/150x150" alt="placeholder">
+    <img src="http://placehold.it/150x150" alt="placeholder" />
   </div>
   <div class="text">
-    Voici un exemple avec un média. On utilise le flottement
-    pour les anciens navigateurs et une grille pour les
-    nouveaux.
+    Voici un exemple avec un média. On utilise le flottement pour les anciens
+    navigateurs et une grille pour les nouveaux.
   </div>
 </div>
 ```
@@ -113,7 +114,9 @@ L'exemple que nous venons de voir est très simple et on peut résoudre le probl
 Dans le prochain exemple, nous aurons un ensemble de cartes disposées avec du flottement. On a défini une largeur ({{cssxref("width")}}) sur ces cartes afin de pouvoir appliquer le flottement {{cssxref("float")}}. Pour créer des espaces entre les cartes, on utilise une marge ({{cssxref("margin")}}) sur les objets puis une marge négative sur le conteneur.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -150,27 +153,39 @@ Dans le prochain exemple, nous aurons un ensemble de cartes disposées avec du f
   <ul>
     <li class="card">
       <h2>Un</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+      <p>
+        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
+      </p>
     </li>
     <li class="card">
       <h2>Deux</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+      <p>
+        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
+      </p>
     </li>
     <li class="card">
       <h2>Trois</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+      <p>
+        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
+      </p>
     </li>
     <li class="card">
-       <h2>Quatre</h2>
-       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+      <h2>Quatre</h2>
+      <p>
+        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
+      </p>
     </li>
     <li class="card">
-       <h2>Cinq</h2>
-       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+      <h2>Cinq</h2>
+      <p>
+        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
+      </p>
     </li>
     <li class="card">
       <h2>Six</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+      <p>
+        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
+      </p>
     </li>
   </ul>
 </div>
@@ -209,7 +224,9 @@ La prise en charge des requêtes de fonctionnalité par les différents navigate
 On utilise donc `@supports` pour vérifier la prise en charge de `display: grid`;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec `auto` pour les éléments {{HTMLElement("li")}}. On retire également les marges, les marges négatives et on remplace l'espacement avec la propriété {{cssxref("gap")}}. Cela signifie qu'il n'y aura pas de marge finale sur la dernière ligne de boîtes. La disposition fonctionne également désormais lorsqu'une carte possède plus de contenu qu'une autre.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -229,15 +246,15 @@ On utilise donc `@supports` pour vérifier la prise en charge de `display: grid`
 
 ```css
 .wrapper ul {
-    overflow: hidden;
-    margin: 0 -10px;
-    padding: 0;
-    list-style: none;
+  overflow: hidden;
+  margin: 0 -10px;
+  padding: 0;
+  list-style: none;
 }
 .wrapper li {
-    float: left;
-    width: calc(33.333333% - 20px);
-    margin: 0 10px 20px 10px;
+  float: left;
+  width: calc(33.333333% - 20px);
+  margin: 0 10px 20px 10px;
 }
 @supports (display: grid) {
   .wrapper ul {
@@ -259,27 +276,39 @@ On utilise donc `@supports` pour vérifier la prise en charge de `display: grid`
   <ul>
     <li class="card">
       <h2>Un</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+      <p>
+        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
+      </p>
     </li>
     <li class="card">
       <h2>Deux</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+      <p>
+        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
+      </p>
     </li>
     <li class="card">
       <h2>Trois</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+      <p>
+        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
+      </p>
     </li>
     <li class="card">
-       <h2>Quatre</h2>
-       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+      <h2>Quatre</h2>
+      <p>
+        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
+      </p>
     </li>
     <li class="card">
-       <h2>Cinq</h2>
-       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+      <h2>Cinq</h2>
+      <p>
+        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
+      </p>
     </li>
     <li class="card">
       <h2>Six</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+      <p>
+        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
+      </p>
     </li>
   </ul>
 </div>
@@ -294,7 +323,9 @@ On utilise donc `@supports` pour vérifier la prise en charge de `display: grid`
 Là encore, on peut utiliser les requêtes de fonctionnalité pour surcharger `display: inline-block`. Ici aussi, il n'est pas nécessaire de tout surcharger. Pour les éléments concernés par `inline-block`, ils deviendront des objets de la grille et `inline-block` ne s'appliquera plus. Dans l'exemple qui suit, on utilise la propriété `vertical-align` sur les éléments lorsqu'on utilise le mode `inline-block`, cette propriété n'étant pas appliquée aux éléments d'une grille, elle est ignorée lorsque l'élément devient un objet de la grille.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -345,27 +376,39 @@ Là encore, on peut utiliser les requêtes de fonctionnalité pour surcharger `d
   <ul>
     <li class="card">
       <h2>Un</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+      <p>
+        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
+      </p>
     </li>
     <li class="card">
       <h2>Deux</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+      <p>
+        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
+      </p>
     </li>
     <li class="card">
       <h2>Trois</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+      <p>
+        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
+      </p>
     </li>
     <li class="card">
-       <h2>Quatre</h2>
-       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+      <h2>Quatre</h2>
+      <p>
+        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
+      </p>
     </li>
     <li class="card">
-       <h2>Cinq</h2>
-       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+      <h2>Cinq</h2>
+      <p>
+        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
+      </p>
     </li>
     <li class="card">
       <h2>Six</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+      <p>
+        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
+      </p>
     </li>
   </ul>
 </div>
diff --git a/files/fr/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md b/files/fr/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md
index 1a1d7b7e7139be..9bc86695db11f5 100644
--- a/files/fr/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md
+++ b/files/fr/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md
@@ -21,7 +21,9 @@ Dans le conteneur, on a quatre éléments fils. Si aucune autre règle de placem
 ![Our Grid highlighted in DevTools](3_hilighted_grid.png)
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -63,10 +65,10 @@ On peut placer les éléments d'une grille en utilisant les numéros de lignes q
 
 ```css
 .box1 {
-   grid-column-start: 1;
-   grid-column-end: 2;
-   grid-row-start: 1;
-   grid-row-end: 4;
+  grid-column-start: 1;
+  grid-column-end: 2;
+  grid-row-start: 1;
+  grid-row-end: 4;
 }
 ```
 
@@ -75,7 +77,9 @@ Lorsqu'on positionne des objets sur la grille, les autres continueront d'être p
 On peut placer chacun des éléments individuellement et on peut également choisir de laisser certaines cellules vides. Un des avantages de la grille CSS est qu'on peut créer des espaces sans avoir à utiliser des marges ou d'autres méthodes de contournement.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -97,10 +101,10 @@ On peut placer chacun des éléments individuellement et on peut également choi
 
 ```html
 <div class="wrapper">
-   <div class="box1">Un</div>
-   <div class="box2">Deux</div>
-   <div class="box3">Trois</div>
-   <div class="box4">Quatre</div>
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
 </div>
 ```
 
@@ -132,7 +136,9 @@ On peut placer chacun des éléments individuellement et on peut également choi
 On a écrit beaucoup de règles pour positionner chaque élément. Heureusement, il existe des propriétés raccourcies qui permettent d'avoir une syntaxe plus concise. Les propriétés {{cssxref("grid-column-start")}} et {{cssxref("grid-column-end")}} peuvent être combinées pour former la propriété raccourcie {{cssxref("grid-column")}} et de la même façon, {{cssxref("grid-row-start")}} et {{cssxref("grid-row-end")}} peuvent être synthétisées avec {{cssxref("grid-row")}}.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -172,7 +178,7 @@ On a écrit beaucoup de règles pour positionner chaque élément. Heureusement,
 }
 .box3 {
   grid-column: 2 / 3;
-  grid-row: 1 /  2;
+  grid-row: 1 / 2;
 }
 .box4 {
   grid-column: 2 / 4;
@@ -187,7 +193,9 @@ On a écrit beaucoup de règles pour positionner chaque élément. Heureusement,
 Dans les exemples précédents, on a défini chaque ligne et colonne de fin pour chaque élément. Mais si en pratique, on souhaite qu'un élément n'occupe qu'une seule piste, on peut omettre `grid-column-end` ou `grid-row-end`. Par défaut, les éléments occupent une seule piste. Notre exemple initial, avec les propriétés détaillées peut donc être réécrit de cette façon :
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -245,7 +253,9 @@ Dans les exemples précédents, on a défini chaque ligne et colonne de fin pour
 Avec les propriétés raccourcies, on obtient le code suivant (sans aucune barre oblique ni seconde valeur pour les éléments qui n'occupent qu'une seule piste).
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -276,20 +286,20 @@ Avec les propriétés raccourcies, on obtient le code suivant (sans aucune barre
 
 ```css
 .box1 {
-  grid-column: 1 ;
+  grid-column: 1;
   grid-row: 1 / 4;
 }
 .box2 {
-  grid-column: 3 ;
+  grid-column: 3;
   grid-row: 1 / 3;
 }
 .box3 {
-  grid-column: 2 ;
-  grid-row: 1 ;
+  grid-column: 2;
+  grid-row: 1;
 }
 .box4 {
   grid-column: 2 / 4;
-  grid-row: 3 ;
+  grid-row: 3;
 }
 ```
 
@@ -305,7 +315,9 @@ On peut aller plus loin et définir une zone pour chaque élément grâce à une
 - `grid-column-end`
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -369,7 +381,9 @@ On peut également compter à l'envers, à partir des lignes de fin. Pour un doc
 Dans le prochain exemple, on renverse la disposition de la grille en travaillant à partir du bas et de la droite.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -391,10 +405,10 @@ Dans le prochain exemple, on renverse la disposition de la grille en travaillant
 
 ```html
 <div class="wrapper">
-   <div class="box1">Un</div>
-   <div class="box2">Deux</div>
-   <div class="box3">Trois</div>
-   <div class="box4">Quatre</div>
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
 </div>
 ```
 
@@ -448,7 +462,9 @@ La spécification pour les grilles CSS permet également d'ajouter des espaces (
 Les gouttières apparaissent uniquement entre les pistes de la grille, elles n'ajoutent pas d'espace en haut, en bas, à gauche ou à droite du conteneur. Voyons comment ajouter des espaces sur l'exemple précédent grâce à ces propriétés :
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -479,20 +495,20 @@ Les gouttières apparaissent uniquement entre les pistes de la grille, elles n'a
 
 ```css
 .box1 {
-  grid-column: 1 ;
+  grid-column: 1;
   grid-row: 1 / 4;
 }
 .box2 {
-  grid-column: 3 ;
+  grid-column: 3;
   grid-row: 1 / 3;
 }
 .box3 {
-  grid-column: 2 ;
-  grid-row: 1 ;
+  grid-column: 2;
+  grid-row: 1;
 }
 .box4 {
   grid-column: 2 / 4;
-  grid-row: 3 ;
+  grid-row: 3;
 }
 .wrapper {
   display: grid;
@@ -525,7 +541,9 @@ Par rapport au positionnement sur les lignes, les gouttières agissent comme si
 On a vu comment indiquer la ligne de début et la ligne de fin avec des numéros. Il est aussi possible de définir la taille d'un élément en indiquant le numéro de la ligne de départ et le nombre de pistes sur lequel s'étale l'élément.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
diff --git a/files/fr/web/css/css_grid_layout/grid_layout_using_named_grid_lines/index.md b/files/fr/web/css/css_grid_layout/grid_layout_using_named_grid_lines/index.md
index 2408f84cc605f6..3f65aa0cb3d6aa 100644
--- a/files/fr/web/css/css_grid_layout/grid_layout_using_named_grid_lines/index.md
+++ b/files/fr/web/css/css_grid_layout/grid_layout_using_named_grid_lines/index.md
@@ -15,7 +15,9 @@ Dans les articles précédents, on a vu comment placer des objets sur les lignes
 Lorsqu'on définit une grille avec `grid-template-rows` et `grid-template-columns`, on peut donner des noms aux lignes (toutes ou seulement quelques unes). Pour illustrer ce point, nous allons reprendre la disposition utilisée dans l'article sur le placement sur les lignes. Cette fois, nous allons utiliser des lignes avec des noms.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -36,8 +38,8 @@ Lorsqu'on définit la grille, on nomme les lignes entre crochets. Ces noms peuve
 
 ```css
 .wrapper {
- display: grid;
- grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  display: grid;
+  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
   grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
 }
 ```
@@ -90,7 +92,9 @@ Plus haut, nous avons vu qu'il était possible de donner n'importe quel nom à u
 Bien qu'on puisse choisir n'importe quel nom (avec les contraintes qu'on vient d'énoncer), si on utilise les suffixes `-start` et `-end` pour désigner les lignes qui entourent une zone (comme dans l'exemple ci-avant), la grille créera automatiquement une zone nommée avec le nom utilisé devant ces suffixes. Si on reprend l'exemple précédent où on utilise `content-start` et `content-end` pour les lignes et pour les colonnes, cela signifie qu'on a, implicitement, une zone de grille intitulée `content` qu'on peut également manipuler
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -122,9 +126,7 @@ On utilise les mêmes définitions qu'avant mais cette fois, nous allons placer
 
 ```html
 <div class="wrapper">
-  <div class="thing">
-    Je suis dans une zone nommée content.
-  </div>
+  <div class="thing">Je suis dans une zone nommée content.</div>
 </div>
 ```
 
@@ -161,7 +163,9 @@ Dans l'image qui suit, on peut voir l'emplacement de ces lignes. Certaines ligne
 On peut positionner `overlay` grâce à ces lignes implicites, de la même façon qu'on aurait positionner un objet avec des lignes créées explicitement :
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -204,9 +208,9 @@ On peut positionner `overlay` grâce à ces lignes implicites, de la même faço
   z-index: 10;
   grid-column: main-start / main-end;
   grid-row: hd-start / ft-end;
-  border: 4px solid rgb(92,148,13);
-  background-color: rgba(92,148,13,.4);
-  color: rgb(92,148,13);
+  border: 4px solid rgb(92, 148, 13);
+  background-color: rgba(92, 148, 13, 0.4);
+  color: rgb(92, 148, 13);
   font-size: 150%;
 }
 ```
@@ -234,7 +238,9 @@ Si vous souhaitez que chaque ligne ait un nom différent, il faudra alors défin
 Dans l'exemple qui suit, nous allons créer une grille avec douze colonnes de même largeur. Avant de définir la taille d'une piste pour la colonne (`1fr`), on définit un nom : `[col-start]`. Cela signifie qu'on aura une grille avec 12 colonnes, toutes intitulées `col-start` et qui mesureront chacune `1fr` de large.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -262,7 +268,7 @@ Une fois la grille créée, on peut y placer les objets. On a alors plusieurs li
 
 ```css
 .item1 {
-  grid-column: col-start / col-start 5
+  grid-column: col-start / col-start 5;
 }
 ```
 
@@ -301,7 +307,7 @@ Si on utilise `repeat()` et qu'on place deux lignes l'une à la suite de l'autre
 
 ```css
 .wrapper {
-  grid-template-columns: repeat(4, [col-start] 1fr [col-end] );
+  grid-template-columns: repeat(4, [col-start] 1fr [col-end]);
 }
 ```
 
@@ -309,14 +315,16 @@ Si on écrivait la même définition sans utiliser `repeat()`, on aurait la form
 
 ```css
 .wrapper {
-  grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr  [col-end col-start] 1fr [col-end];
+  grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end];
 }
 ```
 
 Si vous utilisez une liste de pistes, vous pouvez utiliser le mot-clé `span` pour indiquer le nombre de lignes à occuper mais aussi pour indiquer le nombre de lignes à occuper qui ont un nom donné.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -339,7 +347,7 @@ Si vous utilisez une liste de pistes, vous pouvez utiliser le mot-clé `span` po
   grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr);
 }
 .item1 {
-  grid-column: col1-start / col2-start 2
+  grid-column: col1-start / col2-start 2;
 }
 .item2 {
   grid-row: 2;
@@ -349,8 +357,14 @@ Si vous utilisez une liste de pistes, vous pouvez utiliser le mot-clé `span` po
 
 ```html
 <div class="wrapper">
-  <div class="item1">Je suis placé à partir de la première col1-start et jusqu'à la deuxième col2-start.</div>
-  <div class="item2">Je suis placé à partir de la deuxième col1-start et je m'étend sur deux lignes nommées col1-start</div>
+  <div class="item1">
+    Je suis placé à partir de la première col1-start et jusqu'à la deuxième
+    col2-start.
+  </div>
+  <div class="item2">
+    Je suis placé à partir de la deuxième col1-start et je m'étend sur deux
+    lignes nommées col1-start
+  </div>
 </div>
 ```
 
@@ -373,7 +387,9 @@ Si on travaille avec une disposition sur plusieurs colonnes (comme celles utilis
 On peut alors utiliser ce modèle pour mettre en forme notre page. Par exemple, on peut créer une disposition avec trois colonnes, un en-tête et un pied de page avec les règles suivantes :
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -393,10 +409,10 @@ On peut alors utiliser ce modèle pour mettre en forme notre page. Par exemple,
 ```html
 <div class="wrapper">
   <header class="main-header">Je suis l'en-tête</header>
-   <aside class="side1">Je suis la barre latérale 1</aside>
-   <article class="content">Je suis l'article</article>
-   <aside class="side2">Je suis la barre latérale 2</aside>
-   <footer class="main-footer">Je suis le pied de page</footer>
+  <aside class="side1">Je suis la barre latérale 1</aside>
+  <article class="content">Je suis l'article</article>
+  <aside class="side2">Je suis la barre latérale 2</aside>
+  <footer class="main-footer">Je suis le pied de page</footer>
 </div>
 ```
 
@@ -404,7 +420,7 @@ Pour placer ces éléments, on utilise la grille de la façon suivante :
 
 ```css
 .main-header,
-.main-footer  {
+.main-footer {
   grid-column: col-start / span 12;
 }
 .side1 {
diff --git a/files/fr/web/css/css_grid_layout/grid_template_areas/index.md b/files/fr/web/css/css_grid_layout/grid_template_areas/index.md
index 351b39f9b9405b..7638ac88b5ab64 100644
--- a/files/fr/web/css/css_grid_layout/grid_template_areas/index.md
+++ b/files/fr/web/css/css_grid_layout/grid_template_areas/index.md
@@ -16,7 +16,7 @@ On a déjà utilisé la propriété {{cssxref("grid-area")}} précédemment. C'e
 
 ```css
 .box1 {
-   grid-area: 1 / 1 / 4 / 2;
+  grid-area: 1 / 1 / 4 / 2;
 }
 ```
 
@@ -65,7 +65,9 @@ Grâce à ces noms, on peut créer l'organisation. Cette fois, plutôt que de pl
 ```
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -117,7 +119,9 @@ Dans l'exemple précédent, toute la grille est occupée… On peut également u
 ```
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -142,9 +146,9 @@ Dans l'exemple précédent, toute la grille est occupée… On peut également u
   grid-template-columns: repeat(9, 1fr);
   grid-auto-rows: minmax(100px, auto);
   grid-template-areas:
-      "hd hd hd hd   hd   hd   hd   hd   hd"
-      "sd sd sd main main main main main main"
-      ".  .  .  ft   ft   ft   ft   ft   ft";
+    "hd hd hd hd   hd   hd   hd   hd   hd"
+    "sd sd sd main main main main main main"
+    ".  .  .  ft   ft   ft   ft   ft   ft";
 }
 ```
 
@@ -183,7 +187,9 @@ La zone qu'on crée avec les noms doit être rectangulaires. Actuellement, il n'
 ```
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -236,7 +242,9 @@ Pour ce faire, on définit les noms des zones en dehors de toute _media query_ a
 Pour la disposition vue précédemment, on définit ici une disposition par défaut sur une seule colonne pour les affichages étroits. On a donc une seule piste sur laquelle s'empilent les objets :
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -328,7 +336,9 @@ Ici, la grille se compose de deux pistes en colonnes. La colonne pour l'image es
 Pour la zone dédiée à l'image, on crée une zone de grille intitulée `img` et pour le texte, on crée une seconde zone intitulée `content`. Ensuite, on utilise ces noms pour créer l'organisation via la propriété `grid-template-areas`.
 
 ```css
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .media {
   border: 2px solid #f76707;
@@ -358,8 +368,7 @@ Pour la zone dédiée à l'image, on crée une zone de grille intitulée `img` e
 <div class="media">
   <div class="image"></div>
   <div class="text">
-    Dans cet exemple, on peut utiliser
-    grid-template-areas pour échanger les
+    Dans cet exemple, on peut utiliser grid-template-areas pour échanger les
     places du texte et du media.
   </div>
 </div>
@@ -372,7 +381,9 @@ Pour la zone dédiée à l'image, on crée une zone de grille intitulée `img` e
 Si on a besoin d'afficher l'image d l'autre côté, il suffit de redéfinir une grille pour laquelle la piste qui mesure `1fr` est en dernier et d'échanger les valeurs dans {{cssxref("grid-template-areas")}}.
 
 ```css
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .media {
   border: 2px solid #f76707;
@@ -407,8 +418,7 @@ Si on a besoin d'afficher l'image d l'autre côté, il suffit de redéfinir une
 <div class="media flipped">
   <div class="image"></div>
   <div class="text">
-    Dans cet exemple, on peut utiliser
-    grid-template-areas pour échanger les
+    Dans cet exemple, on peut utiliser grid-template-areas pour échanger les
     places du texte et du media.
   </div>
 </div>
@@ -440,12 +450,12 @@ Le fragment de code suivant crée une disposition identique à celle que nous av
 
 ```css
 .wrapper {
-    display: grid;
-    grid-template:
-      "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
-      "sd sd sd main main main main main main" minmax(100px, auto)
-      "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
-             / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+  display: grid;
+  grid-template:
+    "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
+    "sd sd sd main main main main main main" minmax(100px, auto)
+    "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
+    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 }
 ```
 
@@ -470,11 +480,12 @@ On peut utiliser la même syntaxe qu'avec {{cssxref("grid-template")}} mais atte
 
 ```css
 .wrapper {
-    display: grid;
-    grid: "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
+  display: grid;
+  grid:
+    "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
     "sd sd sd main main main main main main" minmax(100px, auto)
     "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
-    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 }
 ```
 
diff --git a/files/fr/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md b/files/fr/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md
index 78d0903771e538..392004d4dd647a 100644
--- a/files/fr/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md
+++ b/files/fr/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md
@@ -81,8 +81,12 @@ Sur le Web, c'est la valeur `horizontal-tb` qui est la valeur par défaut pour l
 
 ```html
 <div class="wrapper">
-  <p style="writing-mode: horizontal-tb">Mon mode d'écriture est celui par défaut <code>horizontal-tb</code></p>
-  <p style="writing-mode: vertical-rl">Moi je suis écrit avec <code>vertical-rl</code></p>
+  <p style="writing-mode: horizontal-tb">
+    Mon mode d'écriture est celui par défaut <code>horizontal-tb</code>
+  </p>
+  <p style="writing-mode: vertical-rl">
+    Moi je suis écrit avec <code>vertical-rl</code>
+  </p>
 </div>
 ```
 
@@ -97,7 +101,9 @@ Si on reprend l'exemple avec la grille, on comprend mieux l'effet du changement
 Dans le prochain exemple, la grille possède trois colonnes et deux lignes. Cela signifie qu'il y a trois pistes qui traversent l'axe de bloc. Avec le mode d'écriture par défaut, la grille commence par placer les objets en haut à gauche en remplissant les trois cellules sur la première ligne avant de passer à la suivante, en formant une nouvelle ligne, etc.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -140,7 +146,9 @@ Dans le prochain exemple, la grille possède trois colonnes et deux lignes. Cela
 Si on ajoute `writing-mode: vertical-lr` au conteneur de la grille, on peut voir que les axes logiques s'appliquent désormais dans une autre direction. L'axe de bloc (aussi appelé l'axe des colonnes pour la grille) s'étend maintenant de gauche à droite et l'axe en ligne court verticalement.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -188,7 +196,9 @@ Dans les exemples précédents, on a vu comment les axes de bloc et en ligne pou
 Dans le prochain exemple, on aligne des objets dans une grille pour laquelle `writing-mode: vertical-lr`. Les valeurs `start` et `end` fonctionnent de la même façon qu'avec le mode d'écriture par défaut mais, parce qu'elles sont logiques, on voit que la grille est bien renversée.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -262,7 +272,9 @@ Dans l'exemple suivant, on a une grille avec la direction `ltr` et on positionne
 ### Placement sur les lignes pour du texte de gauche à droite
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -287,7 +299,7 @@ Dans l'exemple suivant, on a une grille avec la direction `ltr` et on positionne
   grid-gap: 10px;
 }
 .item1 {
-  grid-column: 1 ;
+  grid-column: 1;
 }
 .item2 {
   grid-column: -1 / -3;
@@ -313,7 +325,9 @@ Dans l'exemple suivant, on a une grille avec la direction `ltr` et on positionne
 Si on ajoute alors la propriété {{cssxref("direction")}} avec la valeur `rtl` pour le conteneur de la grille, la colonne 1 sera la plus à droite et la colonne 1 sera à gauche.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -339,7 +353,7 @@ Si on ajoute alors la propriété {{cssxref("direction")}} avec la valeur `rtl`
   grid-gap: 10px;
 }
 .item1 {
-  grid-column: 1 ;
+  grid-column: 1;
 }
 .item2 {
   grid-column: -1 / -3;
@@ -391,7 +405,10 @@ Les modes d'écritures permettent d'afficher les documents en respectant les rè
   display: grid;
   grid-gap: 20px;
   grid-template-columns: 1fr auto;
-  font: 1em Helvetica, Arial, sans-serif;
+  font:
+    1em Helvetica,
+    Arial,
+    sans-serif;
 }
 .wrapper nav {
   writing-mode: vertical-lr;
@@ -411,8 +428,23 @@ Les modes d'écritures permettent d'afficher les documents en respectant les rè
 ```html
 <div class="wrapper">
   <div class="content">
-    <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
-    <p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p>
+    <p>
+      Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
+      kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
+      winter purslane kale. Celery potato scallion desert raisin horseradish
+      spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo
+      shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.
+      Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi
+      beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki
+      bean chickweed potato bell pepper artichoke.
+    </p>
+    <p>
+      Nori grape silver beet broccoli kombu beet greens fava bean potato
+      quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil
+      turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter
+      purslane fennel azuki bean earthnut pea sierra leone bologi leek soko
+      chicory celtuce parsley jícama salsify.
+    </p>
   </div>
   <nav>
     <ul>
diff --git a/files/fr/web/css/css_grid_layout/index.md b/files/fr/web/css/css_grid_layout/index.md
index b29b3ae85fc435..311cc96c3c7e14 100644
--- a/files/fr/web/css/css_grid_layout/index.md
+++ b/files/fr/web/css/css_grid_layout/index.md
@@ -15,16 +15,18 @@ Comme les tableaux, la grille permet d'aligner des éléments sous forme de colo
 Dans l'exemple qui suit, on montre comment utiliser une grille avec trois pistes en colonnes pour laquelle les nouvelles lignes créées mesureront au moins 100 pixels et auront au plus la taille automatique (définie par leur contenu). Les éléments sont placés sur la grille grâce aux numéros des lignes horizontales et verticales.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 .wrapper {
   max-width: 940px;
   margin: 0 auto;
 }
 
 .wrapper > div {
-  border: 2px solid rgb(233,171,88);
+  border: 2px solid rgb(233, 171, 88);
   border-radius: 5px;
-  background-color: rgba(233,171,88,.5);
+  background-color: rgba(233, 171, 88, 0.5);
   padding: 1em;
   color: #d9480f;
 }
diff --git a/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_grids/index.md b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_grids/index.md
index 17390dc9e7f428..5c883bb089071d 100644
--- a/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_grids/index.md
+++ b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_grids/index.md
@@ -21,12 +21,17 @@ Ici, on crée une disposition avec des zones nommées comme on a pu le voir _[da
 Dans le document on a un conteneur qui contient un en-tête, un pied de page, du contenu principal, une barre de navigation, une barre latérale et un bloc dans lequel on souhaite placer de la publicité.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   max-width: 1024px;
   margin: 0 auto;
-  font: 1.2em Helvetica, arial, sans-serif;
+  font:
+    1.2em Helvetica,
+    arial,
+    sans-serif;
 }
 
 .wrapper > * {
@@ -56,11 +61,10 @@ nav ul {
   <article class="content">
     <h1>L'article principal</h1>
     <p>
-       Dans cette disposition, on affiche les zones dans le même
-       ordre que dans le document pour les écrans dont la largeur
-       est inférieure à 500 pixels. On passe à une disposition sur
-       deux colonnes ou trois colonnes en redéfinissant la grille
-       et le placement des objets sur la grille.
+      Dans cette disposition, on affiche les zones dans le même ordre que dans
+      le document pour les écrans dont la largeur est inférieure à 500 pixels.
+      On passe à une disposition sur deux colonnes ou trois colonnes en
+      redéfinissant la grille et le placement des objets sur la grille.
     </p>
   </article>
   <aside class="side">Barre latérale</aside>
@@ -139,11 +143,11 @@ Enfin, on ajoute une autre requête de média pour la disposition avec trois col
       "header header  header"
       "nav    content sidebar"
       "nav    content ad"
-      "footer footer  footer"
-   }
-   nav ul {
-     flex-direction: column;
-   }
+      "footer footer  footer";
+  }
+  nav ul {
+    flex-direction: column;
+  }
 }
 ```
 
@@ -163,7 +167,10 @@ Si vous travaillez avec un _framework_ ou avec un système de grille, vous êtes
 .wrapper {
   max-width: 1024px;
   margin: 0 auto;
-  font: 1.2em Helvetica, arial, sans-serif;
+  font:
+    1.2em Helvetica,
+    arial,
+    sans-serif;
 }
 .wrapper > * {
   border: 2px solid #f08c00;
@@ -186,9 +193,15 @@ Pour voir comment ce système fonctionne, on place quatre éléments dans le con
 ```html
 <div class="wrapper">
   <div class="item1">Début à la première colonne, s'étend sur 3 colonnes.</div>
-  <div class="item2">Début à la colonne 6, s'étend sur 4 colonnes et deux lignes.</div>
-  <div class="item3">Début à la colonne 2 de la ligne 2, s'étend sur 2 colonnes.</div>
-  <div class="item4">Début à la colonne 3, s'étend jusqu'à la fin de la grille.</div>
+  <div class="item2">
+    Début à la colonne 6, s'étend sur 4 colonnes et deux lignes.
+  </div>
+  <div class="item3">
+    Début à la colonne 2 de la ligne 2, s'étend sur 2 colonnes.
+  </div>
+  <div class="item4">
+    Début à la colonne 3, s'étend jusqu'à la fin de la grille.
+  </div>
 </div>
 ```
 
@@ -199,7 +212,7 @@ Et on place ces éléments sur la grille en utilisant les noms utilisés précé
   grid-column: col-start / span 3;
 }
 .item2 {
-  grid-column: col-start 6 / span 4 ;
+  grid-column: col-start 6 / span 4;
   grid-row: 1 / 3;
 }
 .item3 {
@@ -227,12 +240,17 @@ Il y a certainement certaines différences fondamentales avec les systèmes que
 Pour voir comment cette méthode fonctionne en pratique, nous allons créé le même plan que celui que nous avons vu avec les zones nommées et {{cssxref("grid-template-areas")}} mais en utilisant désormais ce système à 12 colonnes. Commençons avec la même structure que celle utilisée plus haut avec les zones nommées :
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   max-width: 1024px;
   margin: 0 auto;
-  font: 1.2em Helvetica, arial, sans-serif;
+  font:
+    1.2em Helvetica,
+    arial,
+    sans-serif;
 }
 
 .wrapper > * {
@@ -262,11 +280,10 @@ nav ul {
   <article class="content">
     <h1>L'article principal</h1>
     <p>
-       Dans cette disposition, on affiche les zones dans le même
-       ordre que dans le document pour les écrans dont la largeur
-       est inférieure à 500 pixels. On passe à une disposition sur
-       deux colonnes ou trois colonnes en redéfinissant la grille
-       et le placement des objets sur la grille.
+      Dans cette disposition, on affiche les zones dans le même ordre que dans
+      le document pour les écrans dont la largeur est inférieure à 500 pixels.
+      On passe à une disposition sur deux colonnes ou trois colonnes en
+      redéfinissant la grille et le placement des objets sur la grille.
     </p>
   </article>
   <aside class="side">Barre latérale</aside>
@@ -309,7 +326,8 @@ Le panneau dédié à la publicité est affiché sous la barre latérale et comm
     grid-column: col-start / span 3;
     grid-row: 4;
   }
-  .content, .main-footer {
+  .content,
+  .main-footer {
     grid-column: col-start 4 / span 9;
   }
   nav ul {
@@ -369,40 +387,51 @@ Le document utilisé contient une liste d'objets non ordonnée. Pour chaque prod
     <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
     <div class="cta"><a href="">Faire quelque chose !</a></div>
   </li>
-   <li>
-     <h2>Produit n°2</h2>
-     <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
-     <div class="cta"><a href="">Faire quelque chose !</a></div>
-   </li>
-   <li class="wide">
-     <h2>Produit n°3</h2>
-     <div class="body"><p>Le descriptif du produit sera écrit ici.</p>
-     <p>Ce produit possède un descriptif beaucoup plus long.</p>
-     <p>Vraiment plus long</p>
-     <p>Peut-être faudrait-il le gérer différemment ?</p></div>
-     <div class="cta"><a href="">Faire quelque chose !</a></div>
-    </li>
-    <li>
-     <h2>Produit n°4</h2>
-     <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
-     <div class="cta"><a href="">Faire quelque chose !</a></div>
-    </li>
-     <li>
-     <h2>Produit n°5</h2>
-     <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
-      <div class="cta"><a href="">Faire quelque chose !</a></div>
-    </li>
+  <li>
+    <h2>Produit n°2</h2>
+    <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
+    <div class="cta"><a href="">Faire quelque chose !</a></div>
+  </li>
+  <li class="wide">
+    <h2>Produit n°3</h2>
+    <div class="body">
+      <p>Le descriptif du produit sera écrit ici.</p>
+      <p>Ce produit possède un descriptif beaucoup plus long.</p>
+      <p>Vraiment plus long</p>
+      <p>Peut-être faudrait-il le gérer différemment ?</p>
+    </div>
+    <div class="cta"><a href="">Faire quelque chose !</a></div>
+  </li>
+  <li>
+    <h2>Produit n°4</h2>
+    <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
+    <div class="cta"><a href="">Faire quelque chose !</a></div>
+  </li>
+  <li>
+    <h2>Produit n°5</h2>
+    <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
+    <div class="cta"><a href="">Faire quelque chose !</a></div>
+  </li>
 </ul>
 ```
 
 ```css hidden
-* {box-sizing: border-box;}
-img {max-width: 100%; display: block;}
+* {
+  box-sizing: border-box;
+}
+img {
+  max-width: 100%;
+  display: block;
+}
 body {
-  font: 1.2em Helvetica, arial, sans-serif;
+  font:
+    1.2em Helvetica,
+    arial,
+    sans-serif;
 }
 
-a:link, a:visited {
+a:link,
+a:visited {
   text-decoration: none;
   color: #f08c00;
 }
@@ -424,7 +453,7 @@ Nous allons créer une grille avec un nombre de colonnes adaptable et chacune de
   margin: 2em;
   display: grid;
   grid-gap: 20px;
-  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 }
 ```
 
@@ -469,39 +498,50 @@ Si on veut éviter ces trous, on peut utiliser la règle {{cssxref("grid-auto-fl
     <div class="body"><p>The content of this listing item goes here.</p></div>
     <div class="cta"><a href="">Call to action!</a></div>
   </li>
-   <li>
-     <h2>Item Two</h2>
-     <div class="body"><p>The content of this listing item goes here.</p></div>
-     <div class="cta"><a href="">Call to action!</a></div>
-   </li>
-   <li class="wide">
-     <h2>Item Three</h2>
-     <div class="body"><p>The content of this listing item goes here.</p>
-     <p>This one has more text than the other items.</p>
-     <p>Quite a lot more</p>
-     <p>Perhaps we could do something different with it?</p></div>
-     <div class="cta"><a href="">Call to action!</a></div>
-    </li>
-    <li>
-     <h2>Item Four</h2>
-     <div class="body"><p>The content of this listing item goes here.</p></div>
-     <div class="cta"><a href="">Call to action!</a></div>
-    </li>
-     <li>
-     <h2>Item Five</h2>
-     <div class="body"><p>The content of this listing item goes here.</p></div>
-      <div class="cta"><a href="">Call to action!</a></div>
-    </li>
+  <li>
+    <h2>Item Two</h2>
+    <div class="body"><p>The content of this listing item goes here.</p></div>
+    <div class="cta"><a href="">Call to action!</a></div>
+  </li>
+  <li class="wide">
+    <h2>Item Three</h2>
+    <div class="body">
+      <p>The content of this listing item goes here.</p>
+      <p>This one has more text than the other items.</p>
+      <p>Quite a lot more</p>
+      <p>Perhaps we could do something different with it?</p>
+    </div>
+    <div class="cta"><a href="">Call to action!</a></div>
+  </li>
+  <li>
+    <h2>Item Four</h2>
+    <div class="body"><p>The content of this listing item goes here.</p></div>
+    <div class="cta"><a href="">Call to action!</a></div>
+  </li>
+  <li>
+    <h2>Item Five</h2>
+    <div class="body"><p>The content of this listing item goes here.</p></div>
+    <div class="cta"><a href="">Call to action!</a></div>
+  </li>
 </ul>
 ```
 
 ```css hidden
-* {box-sizing: border-box;}
-img {max-width: 100%; display: block;}
+* {
+  box-sizing: border-box;
+}
+img {
+  max-width: 100%;
+  display: block;
+}
 body {
-  font: 1.2em Helvetica, arial, sans-serif;
+  font:
+    1.2em Helvetica,
+    arial,
+    sans-serif;
 }
-a:link, a:visited {
+a:link,
+a:visited {
   text-decoration: none;
   color: #f08c00;
 }
@@ -536,7 +576,7 @@ h2 {
   display: grid;
   grid-gap: 20px;
   grid-auto-flow: dense;
-  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 }
 .listing .wide {
   grid-column-end: span 2;
diff --git a/files/fr/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md
index 85dc24b7dd5183..b3d59499e49909 100644
--- a/files/fr/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md
+++ b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md
@@ -21,7 +21,9 @@ Dans le premier exemple, on utilise un boîte flexible pour organiser un ensembl
 On utilise aussi la propriété {{cssxref("flex-wrap")}} avec la valeur `wrap`, afin de créer une nouvelle ligne si le conteneur devient trop étroit pour conserver `flex-basis`.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -70,7 +72,9 @@ On se demande alors comment faire pour aligner ces éléments… C'est là qu'in
 Dans cet exemple, on crée la même disposition en utilisant la grille CSS. Ici, on a trois pistes `1fr`. Il n'est pas nécessaire de paramétrer quoi que ce soit sur les objets, ils se disposeront eux-mêmes dans chaque cellule formée par la grille. On peut alors voir que les objets restent dans une grille stricte, avec les lignes et les colonnes qui sont alignées. Avec cinq éléments, on a donc un espace restant à la fin de la deuxième ligne.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -130,7 +134,9 @@ Dans un autre article de cette série, nous verrons comment utiliser l'alignemen
 Dans le premier exemple, on utilise les boîtes flexibles avec un conteneur qui dispose de trois objets. La propriété {{cssxref("min-height")}} est définie et paramètre la hauteur du conteneur flexible. {{cssxref("align-items")}} vaut `flex-end` pour le conteneur flexible et les objets s'empileront donc jusqu'à l'extrémité du conteneur flexible. On utilise également la propriété {{cssxref("align-self")}} sur `box1` afin de surcharger la valeur par défaut et d'étirer jusqu'à la hauteur du conteneur et jusqu'à `box2` afin que `box1` soit alignée avec le début du conteneur flexible.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -176,7 +182,9 @@ Dans le premier exemple, on utilise les boîtes flexibles avec un conteneur qui
 Dans cet exemple, on utilise une grille pour créer la même disposition. Cette fois on utilise les propriétés d'alignement des boîtes. On aligne donc par rapport à `start` et `end` plutôt que par rapport à `flex-start` et `flex-end`. Dans le cas d'une disposition en grille, on aligne les éléments à l'intérieur de leur zone de grille. Dans ce cas, il s'agit d'une seule cellule mais on pourrait très bien construire une zone composée de plusieurs cellules.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -204,10 +212,11 @@ Dans cet exemple, on utilise une grille pour créer la même disposition. Cette
 ```css
 .wrapper {
   display: grid;
-  grid-template-columns: repeat(3,1fr);
+  grid-template-columns: repeat(3, 1fr);
   align-items: end;
   grid-auto-rows: 200px;
-}.box1 {
+}
+.box1 {
   align-self: stretch;
 }
 .box2 {
@@ -232,7 +241,9 @@ On peut créer un effet semblable aux boîtes flexibles tout en gardant l'arrang
 Dans l'exemple qui suit, on utilise le mot-clé `auto-fill` à la place d'un entier dans la fonction `repeat` et on définit la taille d'une piste à 200 pixels. Cela signifie que la grille créera autant de pistes de 200 pixels en colonnes qu'il est possible d'en placer dans le conteneur.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -273,7 +284,9 @@ L'exemple précédent ne se comporte pas comme celui avec les boîtes flexibles.
 Dans l'exemple qui suit, on crée des pistes qui sont remplies automatiquement avec `minmax`. On souhaite que les pistes mesurent au moins 200 pixels, avec un maximum de `1fr`. Lorsque le navigateur a calculé la quantité de colonnes qui tiendraient dans le conteneur (en tenant compte des espaces), il utilisera le maximum `1fr` afin de répartir l'espace restant entre les objets.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -320,7 +333,9 @@ Pour qu'une grille soit un bloc englobant, il faut utiliser la propriété `posi
 Dans l'exemple ci-après, on a un conteneur avec quatre enfants. Le troisième élément est positionné en absolu et est placé sur la grille. La grille, le conteneur, a `position:` `relative` et devient donc le contexte de positionnement pour cet objet.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -342,10 +357,9 @@ Dans l'exemple ci-après, on a un conteneur avec quatre enfants. Le troisième 
   <div class="box1">Un</div>
   <div class="box2">Deux</div>
   <div class="box3">
-    Ce bloc est positionné de façon absolue. Dans cet exemple
-    la grille est le bloc englobant et les valeurs de décalage
-    pour la position sont calculées depuis les bords extérieurs
-    de la zone dans laquelle a été placé l'élément.
+    Ce bloc est positionné de façon absolue. Dans cet exemple la grille est le
+    bloc englobant et les valeurs de décalage pour la position sont calculées
+    depuis les bords extérieurs de la zone dans laquelle a été placé l'élément.
   </div>
   <div class="box4">Quatre</div>
 </div>
@@ -354,7 +368,7 @@ Dans l'exemple ci-après, on a un conteneur avec quatre enfants. Le troisième 
 ```css
 .wrapper {
   display: grid;
-  grid-template-columns: repeat(4,1fr);
+  grid-template-columns: repeat(4, 1fr);
   grid-auto-rows: 200px;
   grid-gap: 20px;
   position: relative;
@@ -391,7 +405,9 @@ Si l'élément positionné de façon absolu est imbriqué dans une zone de la gr
 On indique que `.box3` a une position relative puis on positionne l'élément avec des propriétés de décalage. Dans ce cas, le contexte de positionnement est la zone de la grille.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -412,11 +428,12 @@ On indique que `.box3` a une position relative puis on positionne l'élément av
 <div class="wrapper">
   <div class="box1">Un</div>
   <div class="box2">Deux</div>
-  <div class="box3">Trois
+  <div class="box3">
+    Trois
     <div class="abspos">
-      Ce bloc est positionné de façon absolue. Dans cet exemple
-      la zone de la grille est le bloc englobant et le positionnement
-      est calculé à partir des bords de la zone de la grille.
+      Ce bloc est positionné de façon absolue. Dans cet exemple la zone de la
+      grille est le bloc englobant et le positionnement est calculé à partir des
+      bords de la zone de la grille.
     </div>
   </div>
   <div class="box4">Quatre</div>
@@ -426,7 +443,7 @@ On indique que `.box3` a une position relative puis on positionne l'élément av
 ```css
 .wrapper {
   display: grid;
-  grid-template-columns: repeat(4,1fr);
+  grid-template-columns: repeat(4, 1fr);
   grid-auto-rows: 200px;
   grid-gap: 20px;
 }
@@ -441,8 +458,8 @@ On indique que `.box3` a une position relative puis on positionne l'élément av
   position: absolute;
   top: 40px;
   left: 40px;
-  background-color: rgba(255,255,255,.5);
-  border: 1px solid rgba(0,0,0,0.5);
+  background-color: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(0, 0, 0, 0.5);
   color: #000;
   padding: 10px;
 }
@@ -461,7 +478,9 @@ Si on utilise `display:` `contents` sur un élément, la boîte qu'il aurait nor
 ### Utiliser display contents avant
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -517,7 +536,9 @@ Si on utilise `display:` `contents` sur un élément, la boîte qu'il aurait nor
 Si on ajoute `display:` `contents` aux règles qui ciblent `box1`, la boîte de cet élément disparaîtra et ses sous-éléments deviendront alors des éléments de la grille qui se placeront selon les règles de placement automatiques pour la grille.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   border: 2px solid #f76707;
diff --git a/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.md b/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.md
index c46992ba4b0540..8c1ec9eb5b691a 100644
--- a/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.md
+++ b/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.md
@@ -16,7 +16,7 @@ Supposons qu'une image est affichée pour chaque élement de la classe `toolbtn`
 
 ```css
 .toolbtn {
-  background: url('myfile.png');
+  background: url("myfile.png");
   display: inline-block;
   height: 20px;
   width: 20px;
diff --git a/files/fr/web/css/css_images/using_css_gradients/index.md b/files/fr/web/css/css_images/using_css_gradients/index.md
index a2afeef6b50759..ae763861a74e8b 100644
--- a/files/fr/web/css/css_images/using_css_gradients/index.md
+++ b/files/fr/web/css/css_images/using_css_gradients/index.md
@@ -8,11 +8,11 @@ translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
 
 Les **dégradés CSS** sont représentés par le type de donnée [`<gradient>`](/fr/docs/Web/CSS/gradient) qui est un sous-ensemble du type [`<image>`](/fr/docs/Web/CSS/image). L'utilisation de dégradés CSS permet d'afficher des transitions douces entre deux couleurs ou plus. Il existe trois sortes de dégradés&nbsp;:
 
-- Les dégradés linéaires (créés avec la fonction [`linear-gradient()`](/fr/docs/Web/CSS/gradient/linear-gradient())),
-- Les dégradés radiaux (créés avec la fonction [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient())),
-- Les dégradés coniques (créés avec la fonction [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient())).
+- Les dégradés linéaires (créés avec la fonction [`linear-gradient()`](</fr/docs/Web/CSS/gradient/linear-gradient()>)),
+- Les dégradés radiaux (créés avec la fonction [`radial-gradient()`](</fr/docs/Web/CSS/gradient/radial-gradient()>)),
+- Les dégradés coniques (créés avec la fonction [`conic-gradient()`](</fr/docs/Web/CSS/gradient/conic-gradient()>)).
 
-Les dégradés peuvent être répétés avec les fonctions respectives [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()), [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()) et [`repeating-conic-gradient()`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient()).
+Les dégradés peuvent être répétés avec les fonctions respectives [`repeating-linear-gradient()`](</fr/docs/Web/CSS/gradient/repeating-linear-gradient()>), [`repeating-radial-gradient()`](</fr/docs/Web/CSS/gradient/repeating-radial-gradient()>) et [`repeating-conic-gradient()`](</fr/docs/Web/CSS/gradient/repeating-conic-gradient()>).
 
 Les dégradés peuvent être utilisés à chaque endroit où on peut utiliser une image (par exemple les arrière-plans). Les dégradés étant générés dynamiquement, ils permettent d'éviter d'utiliser des images matricielles pour ces effets, le temps de téléchargement et la bande passante utilisée sont réduits. En outre, comme le dégradé est généré par le navigateur, les objets concernés se comporteront mieux en cas de zoom et votre mise en page peut être ajustée de manière plus flexible.
 
@@ -274,16 +274,40 @@ div {
 
 ```css
 .multiposition-stops {
-  background: linear-gradient(to left,
-      lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
-  background: linear-gradient(to left,
-      lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
+  background: linear-gradient(
+    to left,
+    lime 20%,
+    red 30%,
+    red 45%,
+    cyan 55%,
+    cyan 70%,
+    yellow 80%
+  );
+  background: linear-gradient(
+    to left,
+    lime 20%,
+    red 30% 45%,
+    cyan 55% 70%,
+    yellow 80%
+  );
 }
 .multiposition-stop2 {
-  background: linear-gradient(to left,
-      lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
-  background: linear-gradient(to left,
-      lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
+  background: linear-gradient(
+    to left,
+    lime 25%,
+    red 25%,
+    red 50%,
+    cyan 50%,
+    cyan 75%,
+    yellow 75%
+  );
+  background: linear-gradient(
+    to left,
+    lime 25%,
+    red 25% 50%,
+    cyan 50% 75%,
+    yellow 75%
+  );
 }
 ```
 
@@ -300,7 +324,8 @@ Dans les deux exemples, le dégradé est écrit deux fois&nbsp;: la première co
 Par défaut, un dégradé progresse linéairement entre les deux couleurs et la couleur médiane est atteinte à la moitié du parcours. Toutefois, si on veut atteindre cette couleur médiane plus tôt ou plus tard, on peut fournir une indication permettant de définir l'emplacement du milieu de la transition. Dans l'exemple qui suit, la couleur est à la moitié de la transition entre le vert et le cyan à 20% du dégradé (et non à 50%). Le deuxième exemple ne contient pas de telle indication et la transition s'effectue linéairement. Vous pouvez ainsi observer l'impact d'une telle indication.
 
 ```html hidden
-<div class="colorhint-gradient"></div> <div class="regular-progression"></div>
+<div class="colorhint-gradient"></div>
+<div class="regular-progression"></div>
 ```
 
 ```css hidden
@@ -366,10 +391,12 @@ Il est possible d'empiler différents dégradés. Il suffit que les dégradés s
 
 ```css
 .linear-gradient {
-  background:
-    linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+  background: linear-gradient(
+      217deg,
+      rgba(255, 0, 0, 0.8),
+      rgba(255, 0, 0, 0) 70.71%
+    ), linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
+    linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
 }
 
 div {
@@ -478,8 +505,13 @@ div {
 
 ```css
 .radial-ellipse-side {
-  background: radial-gradient(ellipse closest-side,
-      red, yellow 10%, #1e90ff 50%, beige);
+  background: radial-gradient(
+    ellipse closest-side,
+    red,
+    yellow 10%,
+    #1e90ff 50%,
+    beige
+  );
 }
 ```
 
@@ -502,8 +534,13 @@ div {
 
 ```css
 .radial-ellipse-far {
-  background: radial-gradient(ellipse farthest-corner,
-      red, yellow 10%, #1e90ff 50%, beige);
+  background: radial-gradient(
+    ellipse farthest-corner,
+    red,
+    yellow 10%,
+    #1e90ff 50%,
+    beige
+  );
 }
 ```
 
@@ -526,8 +563,13 @@ div {
 
 ```css
 .radial-circle-close {
-  background: radial-gradient(circle closest-side at 25% 75%,
-      red, yellow 10%, #1e90ff 50%, beige);
+  background: radial-gradient(
+    circle closest-side at 25% 75%,
+    red,
+    yellow 10%,
+    #1e90ff 50%,
+    beige
+  );
 }
 ```
 
@@ -550,8 +592,13 @@ div {
 
 ```css
 .radial-ellipse-size {
-  background: radial-gradient(ellipse 50% 50px,
-      red, yellow 10%, #1e90ff 50%, beige);
+  background: radial-gradient(
+    ellipse 50% 50px,
+    red,
+    yellow 10%,
+    #1e90ff 50%,
+    beige
+  );
 }
 ```
 
@@ -574,8 +621,7 @@ div {
 
 ```css
 .radial-circle-size {
-  background: radial-gradient(circle 50px,
-      red, yellow 10%, #1e90ff 50%, beige);
+  background: radial-gradient(circle 50px, red, yellow 10%, #1e90ff 50%, beige);
 }
 ```
 
@@ -599,15 +645,21 @@ div {
 ```css
 .stacked-radial {
   background:
-      radial-gradient(circle at 50% 0,
-        rgba(255,0,0,.5),
-        rgba(255,0,0,0) 70.71%),
-      radial-gradient(circle at 6.7% 75%,
-        rgba(0,0,255,.5),
-        rgba(0,0,255,0) 70.71%),
-      radial-gradient(circle at 93.3% 75%,
-        rgba(0,255,0,.5),
-        rgba(0,255,0,0) 70.71%) beige;
+    radial-gradient(
+      circle at 50% 0,
+      rgba(255, 0, 0, 0.5),
+      rgba(255, 0, 0, 0) 70.71%
+    ),
+    radial-gradient(
+      circle at 6.7% 75%,
+      rgba(0, 0, 255, 0.5),
+      rgba(0, 0, 255, 0) 70.71%
+    ),
+    radial-gradient(
+        circle at 93.3% 75%,
+        rgba(0, 255, 0, 0.5),
+        rgba(0, 255, 0, 0) 70.71%
+      ) beige;
   border-radius: 50%;
 }
 ```
@@ -685,7 +737,15 @@ div {
 
 ```css
 .conic-gradient {
-  background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
+  background: conic-gradient(
+    from 45deg,
+    red,
+    orange,
+    yellow,
+    green,
+    blue,
+    purple
+  );
 }
 ```
 
@@ -693,13 +753,13 @@ div {
 
 ## Répéter des dégradés
 
-Les propriétés [`linear-gradient()`](/fr/docs/Web/CSS/gradient/linear-gradient()), [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient()) et [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient()) ne permettent pas automatiquement de répéter les arrêts de couleur. Toutefois, les fonctions [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()), [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()) et [`repeating-conic-gradient()`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient()) offrent cette fonctionnalité.
+Les propriétés [`linear-gradient()`](</fr/docs/Web/CSS/gradient/linear-gradient()>), [`radial-gradient()`](</fr/docs/Web/CSS/gradient/radial-gradient()>) et [`conic-gradient()`](</fr/docs/Web/CSS/gradient/conic-gradient()>) ne permettent pas automatiquement de répéter les arrêts de couleur. Toutefois, les fonctions [`repeating-linear-gradient()`](</fr/docs/Web/CSS/gradient/repeating-linear-gradient()>), [`repeating-radial-gradient()`](</fr/docs/Web/CSS/gradient/repeating-radial-gradient()>) et [`repeating-conic-gradient()`](</fr/docs/Web/CSS/gradient/repeating-conic-gradient()>) offrent cette fonctionnalité.
 
 La taille de la portion (ligne ou arc) répétée est donnée par la longueur (ou l'arc) entre le premier arrêt de couleur et le dernier arrêt de couleur. Si on n'indique pas de coordonnées pour le premier et le dernier arrêts, ceux-ci prendront respectivement 0 et 100%. Si aucun n'est déclaré, la ligne du dégradé occupera 100%, ce qui signifie que les dégradés linéaires et coniques ne se répèteront pas et que le dégradé radial ne se répètera que si le rayon du dégradé est plus petit que la distance entre le centre du dégradé et le coin le plus proche. Si le premier arrêt de couleur est déclaré et que la valeur est supérieure à 0, le dégradé se répètera, car la taille de la ligne ou de l'arc est donnée par la différence entre le premier et le dernier arrêt de couleur, qui vaudra alors ici moins de 100% ou 360 degrés.
 
 ### Répéter un dégradé linéaire
 
-Dans cet exemple, on utilise la fonction [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()) afin de créer un dégradé linéaire qui se répète le long d'une ligne. Les couleurs forment un cycle lorsque le motif se répète.
+Dans cet exemple, on utilise la fonction [`repeating-linear-gradient()`](</fr/docs/Web/CSS/gradient/repeating-linear-gradient()>) afin de créer un dégradé linéaire qui se répète le long d'une ligne. Les couleurs forment un cycle lorsque le motif se répète.
 
 ```html hidden
 <div class="repeating-linear"></div>
@@ -714,7 +774,13 @@ div {
 
 ```css
 .repeating-linear {
-  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
+  background: repeating-linear-gradient(
+    -45deg,
+    red,
+    red 5px,
+    blue 5px,
+    blue 10px
+  );
 }
 ```
 
@@ -739,20 +805,28 @@ div {
 
 ```css
 .multi-repeating-linear {
-  background:
-      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
-        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
-        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
-        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
-        rgba(255, 0, 0, 0.5) 300px),
-      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
-        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
-        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
-        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
-        rgba(255, 0, 0, 0.5) 230px),
-      repeating-linear-gradient(23deg, red 50px, orange 100px,
-        yellow 150px, green 200px, blue 250px,
-        indigo 300px, violet 350px, red 370px);
+  background: repeating-linear-gradient(
+      190deg,
+      rgba(255, 0, 0, 0.5) 40px,
+      rgba(255, 153, 0, 0.5) 80px,
+      rgba(255, 255, 0, 0.5) 120px,
+      rgba(0, 255, 0, 0.5) 160px,
+      rgba(0, 0, 255, 0.5) 200px,
+      rgba(75, 0, 130, 0.5) 240px,
+      rgba(238, 130, 238, 0.5) 280px,
+      rgba(255, 0, 0, 0.5) 300px
+    ), repeating-linear-gradient(
+      -190deg,
+      rgba(255, 0, 0, 0.5) 30px,
+      rgba(255, 153, 0, 0.5) 60px,
+      rgba(255, 255, 0, 0.5) 90px,
+      rgba(0, 255, 0, 0.5) 120px,
+      rgba(0, 0, 255, 0.5) 150px,
+      rgba(75, 0, 130, 0.5) 180px,
+      rgba(238, 130, 238, 0.5) 210px,
+      rgba(255, 0, 0, 0.5) 230px
+    ), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green
+        200px, blue 250px, indigo 300px, violet 350px, red 370px);
 }
 ```
 
@@ -775,23 +849,46 @@ div {
 
 ```css
 .plaid-gradient {
-  background:
-      repeating-linear-gradient(90deg, transparent, transparent 50px,
-        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
-        transparent 56px, transparent 63px,
-        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
-        transparent 69px, transparent 116px,
-        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
-      repeating-linear-gradient(0deg, transparent, transparent 50px,
-        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
-        transparent 56px, transparent 63px,
-        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
-        transparent 69px, transparent 116px,
-        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
-      repeating-linear-gradient(-45deg, transparent, transparent 5px,
-        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
-      repeating-linear-gradient(45deg, transparent, transparent 5px,
-        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
+  background: repeating-linear-gradient(
+      90deg,
+      transparent,
+      transparent 50px,
+      rgba(255, 127, 0, 0.25) 50px,
+      rgba(255, 127, 0, 0.25) 56px,
+      transparent 56px,
+      transparent 63px,
+      rgba(255, 127, 0, 0.25) 63px,
+      rgba(255, 127, 0, 0.25) 69px,
+      transparent 69px,
+      transparent 116px,
+      rgba(255, 206, 0, 0.25) 116px,
+      rgba(255, 206, 0, 0.25) 166px
+    ), repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 50px,
+      rgba(255, 127, 0, 0.25) 50px,
+      rgba(255, 127, 0, 0.25) 56px,
+      transparent 56px,
+      transparent 63px,
+      rgba(255, 127, 0, 0.25) 63px,
+      rgba(255, 127, 0, 0.25) 69px,
+      transparent 69px,
+      transparent 116px,
+      rgba(255, 206, 0, 0.25) 116px,
+      rgba(255, 206, 0, 0.25) 166px
+    ), repeating-linear-gradient(
+      -45deg,
+      transparent,
+      transparent 5px,
+      rgba(143, 77, 63, 0.25) 5px,
+      rgba(143, 77, 63, 0.25) 10px
+    ), repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(
+          143,
+          77,
+          63,
+          0.25
+        ) 5px, rgba(143, 77, 63, 0.25) 10px);
 }
 ```
 
@@ -799,7 +896,7 @@ div {
 
 ### Répéter des dégradés radiaux
 
-Ici, on utilise la fonction [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()) afin de créer un dégradé radial qui se répète. Les couleurs utilisées forment un cycle lorsque le motif unitaire recommence.
+Ici, on utilise la fonction [`repeating-radial-gradient()`](</fr/docs/Web/CSS/gradient/repeating-radial-gradient()>) afin de créer un dégradé radial qui se répète. Les couleurs utilisées forment un cycle lorsque le motif unitaire recommence.
 
 ```html hidden
 <div class="repeating-radial"></div>
@@ -814,7 +911,12 @@ div {
 
 ```css
 .repeating-radial {
-  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+  background: repeating-radial-gradient(
+    black,
+    black 5px,
+    white 5px,
+    white 10px
+  );
 }
 ```
 
@@ -836,13 +938,23 @@ div {
 ```css
 .multi-target {
   background:
-      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
-        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
-        rgba(255,255,255,0.5) 30px) top left no-repeat,
-      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
-        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
-        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
-  background-size: 200px 200px, 150px 150px;
+    repeating-radial-gradient(
+        ellipse at 80% 50%,
+        rgba(0, 0, 0, 0.5),
+        rgba(0, 0, 0, 0.5) 15px,
+        rgba(255, 255, 255, 0.5) 15px,
+        rgba(255, 255, 255, 0.5) 30px
+      ) top left no-repeat,
+    repeating-radial-gradient(
+        ellipse at 20% 50%,
+        rgba(0, 0, 0, 0.5),
+        rgba(0, 0, 0, 0.5) 10px,
+        rgba(255, 255, 255, 0.5) 10px,
+        rgba(255, 255, 255, 0.5) 20px
+      ) top left no-repeat yellow;
+  background-size:
+    200px 200px,
+    150px 150px;
 }
 ```
 
@@ -852,21 +964,21 @@ div {
 
 - Les fonctions de manipulation des dégradés&nbsp;:
 
-  - [`linear-gradient`](/fr/docs/Web/CSS/gradient/linear-gradient()),
-  - [`radial-gradient`](/fr/docs/Web/CSS/gradient/radial-gradient()),
-  - [`conic-gradient`](/fr/docs/Web/CSS/gradient/conic-gradient()),
-  - [`repeating-linear-gradient`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()),
-  - [`repeating-radial-gradient`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()),
-  - [`repeating-conic-gradient`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient())
+  - [`linear-gradient`](</fr/docs/Web/CSS/gradient/linear-gradient()>)
+  - [`radial-gradient`](</fr/docs/Web/CSS/gradient/radial-gradient()>)
+  - [`conic-gradient`](</fr/docs/Web/CSS/gradient/conic-gradient()>)
+  - [`repeating-linear-gradient`](</fr/docs/Web/CSS/gradient/repeating-linear-gradient()>)
+  - [`repeating-radial-gradient`](</fr/docs/Web/CSS/gradient/repeating-radial-gradient()>)
+  - [`repeating-conic-gradient`](</fr/docs/Web/CSS/gradient/repeating-conic-gradient()>)
 
 - Les types de donnée CSS relatifs aux dégradés&nbsp;:
 
-  - [`<gradient>`](/fr/docs/Web/CSS/gradient),
+  - [`<gradient>`](/fr/docs/Web/CSS/gradient)
   - [`<image>`](/fr/docs/Web/CSS/image)
 
 - Certaines propriétés CSS qui permettent d'utiliser des dégradés&nbsp;:
 
-  - [`background`](/fr/docs/Web/CSS/background),
+  - [`background`](/fr/docs/Web/CSS/background)
   - [`background-image`](/fr/docs/Web/CSS/background-image)
 
 - [Une bibliothèque de motifs de dégradés CSS, créée par Lea Verou](https://lea.verou.me/css3patterns/)
diff --git a/files/fr/web/css/css_lists/consistent_list_indentation/index.md b/files/fr/web/css/css_lists/consistent_list_indentation/index.md
index 31efa332862dc4..bbabb2ee577701 100644
--- a/files/fr/web/css/css_lists/consistent_list_indentation/index.md
+++ b/files/fr/web/css/css_lists/consistent_list_indentation/index.md
@@ -39,7 +39,8 @@ C'est pourquoi, dans tous les navigateurs sauf Internet Explorer Windows, les ma
 Comment cela va-t-il être rendu dans un document&nbsp;? Pour le moment, nous avons un résultat équivalent à ces styles&nbsp;:
 
 ```css
-ul, li {
+ul,
+li {
   margin-left: 0;
   padding-left: 0;
 }
diff --git a/files/fr/web/css/css_logical_properties_and_values/floating_and_positioning/index.md b/files/fr/web/css/css_logical_properties_and_values/floating_and_positioning/index.md
index 1c6c2b8a14b982..8ac4e4b54ee76f 100644
--- a/files/fr/web/css/css_logical_properties_and_values/floating_and_positioning/index.md
+++ b/files/fr/web/css/css_logical_properties_and_values/floating_and_positioning/index.md
@@ -12,26 +12,26 @@ translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning
 
 Le tableau ci-après définit les propriétés et les valeurs que nous verrons dans ce guide et la correspondance avec les propriétés et valeurs physiques si on utilisait un mode d'écriture horizontal allant de gauche à droite.
 
-| Propriété ou valeur logique                  | Propriété ou valeur physique              |
-| -------------------------------------------- | ----------------------------------------- |
-| {{cssxref("float")}}`: inline-start` | {{cssxref("float")}}`: left`      |
-| {{cssxref("float")}}`: inline-end`   | {{cssxref("float")}}`: right`     |
-| {{cssxref("clear")}}`: inline-start` | {{cssxref("clear")}}`: left`      |
-| {{cssxref("clear")}}`: inline-end`   | {{cssxref("clear")}}`: right`     |
-| {{cssxref("inset-inline-start")}} | {{cssxref("left")}}                  |
-| {{cssxref("inset-inline-end")}}     | {{cssxref("right")}}              |
-| {{cssxref("inset-block-start")}} | {{cssxref("top")}}                  |
-| {{cssxref("inset-block-end")}}     | {{cssxref("bottom")}}              |
-| {{cssxref("text-align")}}`: start`    | {{cssxref("text-align")}}`: left`  |
-| {{cssxref("text-align")}}`: end`      | {{cssxref("text-align")}}`: right` |
+| Propriété ou valeur logique          | Propriété ou valeur physique       |
+| ------------------------------------ | ---------------------------------- |
+| {{cssxref("float")}}`: inline-start` | {{cssxref("float")}}`: left`       |
+| {{cssxref("float")}}`: inline-end`   | {{cssxref("float")}}`: right`      |
+| {{cssxref("clear")}}`: inline-start` | {{cssxref("clear")}}`: left`       |
+| {{cssxref("clear")}}`: inline-end`   | {{cssxref("clear")}}`: right`      |
+| {{cssxref("inset-inline-start")}}    | {{cssxref("left")}}                |
+| {{cssxref("inset-inline-end")}}      | {{cssxref("right")}}               |
+| {{cssxref("inset-block-start")}}     | {{cssxref("top")}}                 |
+| {{cssxref("inset-block-end")}}       | {{cssxref("bottom")}}              |
+| {{cssxref("text-align")}}`: start`   | {{cssxref("text-align")}}`: left`  |
+| {{cssxref("text-align")}}`: end`     | {{cssxref("text-align")}}`: right` |
 
 En plus de ces correspondances, certaines propriétés logiques raccourcies ont été ajoutées. Pour celles-ci, qui ciblent les extrêmités des axes en ligne ou de bloc, il n'y a pas de correspondance avec des propriétés physiques existantes à l'exception de {{cssxref("inset")}}.
 
-| Propriété logique                    | Objectif                                                                                           |
-| ------------------------------------ | -------------------------------------------------------------------------------------------------- |
+| Propriété logique           | Objectif                                                                                           |
+| --------------------------- | -------------------------------------------------------------------------------------------------- |
 | {{cssxref("inset-inline")}} | Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe en ligne. |
-| {{cssxref("inset-block")}} | Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe de bloc.  |
-| {{cssxref("inset")}}         | Cette propriété définit les valeurs des quatre décalages.                                          |
+| {{cssxref("inset-block")}}  | Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe de bloc.  |
+| {{cssxref("inset")}}        | Cette propriété définit les valeurs des quatre décalages.                                          |
 
 ## Exemple d'un flottement et d'un dégagement
 
diff --git a/files/fr/web/css/css_logical_properties_and_values/margins_borders_padding/index.md b/files/fr/web/css/css_logical_properties_and_values/margins_borders_padding/index.md
index c82a54ffe1dcfa..6aa63bbec2be2f 100644
--- a/files/fr/web/css/css_logical_properties_and_values/margins_borders_padding/index.md
+++ b/files/fr/web/css/css_logical_properties_and_values/margins_borders_padding/index.md
@@ -16,53 +16,53 @@ La spécification détaille les correspondances entre les valeurs logiques et le
 
 Si on avait utilisé un mode d'écriture `horizontal-tb` orienté de droite à gauche, {{cssxref("margin-inline-start")}} aurait correspondu à {{cssxref("margin-right")}}. Pour un mode d'écriture vertical, elle aurait correspondu à {{cssxref("margin-top")}}.
 
-| Propriété logique                                    | Propriété physique                                       |
-| ---------------------------------------------------- | -------------------------------------------------------- |
-| {{cssxref("border-block-end")}}             | {{cssxref("border-bottom")}}                     |
-| {{cssxref("border-block-end-color")}}     | {{cssxref("border-bottom-color")}}             |
-| {{cssxref("border-block-end-style")}}     | {{cssxref("border-bottom-style")}}             |
-| {{cssxref("border-block-end-width")}}     | {{cssxref("border-bottom-width")}}             |
-| {{cssxref("border-block-start")}}         | {{cssxref("border-top")}}                         |
-| {{cssxref("border-block-start-color")}} | {{cssxref("border-top-color")}}                 |
-| {{cssxref("border-block-start-style")}} | {{cssxref("border-top-style")}}                 |
-| {{cssxref("border-block-start-width")}} | {{cssxref("border-top-width")}}                 |
-| {{cssxref("border-inline-end")}}         | {{cssxref("border-right")}}                     |
-| {{cssxref("border-inline-end-color")}} | {{cssxref("border-right-color")}}             |
-| {{cssxref("border-inline-end-style")}} | {{cssxref("border-right-style")}}             |
-| {{cssxref("border-inline-end-width")}} | {{cssxref("border-right-width")}}             |
-| {{cssxref("border-inline-start")}}         | {{cssxref("border-left")}}                     |
-| {{cssxref("border-inline-start-color")}} | {{cssxref("border-left-color")}}             |
-| {{cssxref("border-inline-start-style")}} | {{cssxref("border-left-style")}}             |
-| {{cssxref("border-inline-start-width")}} | {{cssxref("border-left-width")}}             |
-| {{cssxref("border-start-start-radius")}} | {{cssxref("border-top-left-radius")}}         |
-| {{cssxref("border-start-end-radius")}} | {{cssxref("border-bottom-left-radius")}}     |
-| {{cssxref("border-end-start-radius")}} | {{cssxref("border-top-right-radius")}}     |
+| Propriété logique                        | Propriété physique                        |
+| ---------------------------------------- | ----------------------------------------- |
+| {{cssxref("border-block-end")}}          | {{cssxref("border-bottom")}}              |
+| {{cssxref("border-block-end-color")}}    | {{cssxref("border-bottom-color")}}        |
+| {{cssxref("border-block-end-style")}}    | {{cssxref("border-bottom-style")}}        |
+| {{cssxref("border-block-end-width")}}    | {{cssxref("border-bottom-width")}}        |
+| {{cssxref("border-block-start")}}        | {{cssxref("border-top")}}                 |
+| {{cssxref("border-block-start-color")}}  | {{cssxref("border-top-color")}}           |
+| {{cssxref("border-block-start-style")}}  | {{cssxref("border-top-style")}}           |
+| {{cssxref("border-block-start-width")}}  | {{cssxref("border-top-width")}}           |
+| {{cssxref("border-inline-end")}}         | {{cssxref("border-right")}}               |
+| {{cssxref("border-inline-end-color")}}   | {{cssxref("border-right-color")}}         |
+| {{cssxref("border-inline-end-style")}}   | {{cssxref("border-right-style")}}         |
+| {{cssxref("border-inline-end-width")}}   | {{cssxref("border-right-width")}}         |
+| {{cssxref("border-inline-start")}}       | {{cssxref("border-left")}}                |
+| {{cssxref("border-inline-start-color")}} | {{cssxref("border-left-color")}}          |
+| {{cssxref("border-inline-start-style")}} | {{cssxref("border-left-style")}}          |
+| {{cssxref("border-inline-start-width")}} | {{cssxref("border-left-width")}}          |
+| {{cssxref("border-start-start-radius")}} | {{cssxref("border-top-left-radius")}}     |
+| {{cssxref("border-start-end-radius")}}   | {{cssxref("border-bottom-left-radius")}}  |
+| {{cssxref("border-end-start-radius")}}   | {{cssxref("border-top-right-radius")}}    |
 | {{cssxref("border-end-end-radius")}}     | {{cssxref("border-bottom-right-radius")}} |
-| {{cssxref("margin-block-end")}}             | {{cssxref("margin-bottom")}}                     |
-| {{cssxref("margin-block-start")}}         | {{cssxref("margin-top")}}                         |
-| {{cssxref("margin-inline-end")}}         | {{cssxref("margin-right")}}                     |
-| {{cssxref("margin-inline-start")}}         | {{cssxref("margin-left")}}                     |
-| {{cssxref("padding-block-end")}}         | {{cssxref("padding-bottom")}}                 |
-| {{cssxref("padding-block-start")}}         | {{cssxref("padding-top")}}                     |
-| {{cssxref("padding-inline-end")}}         | {{cssxref("padding-right")}}                     |
-| {{cssxref("padding-inline-start")}}     | {{cssxref("padding-left")}}                     |
+| {{cssxref("margin-block-end")}}          | {{cssxref("margin-bottom")}}              |
+| {{cssxref("margin-block-start")}}        | {{cssxref("margin-top")}}                 |
+| {{cssxref("margin-inline-end")}}         | {{cssxref("margin-right")}}               |
+| {{cssxref("margin-inline-start")}}       | {{cssxref("margin-left")}}                |
+| {{cssxref("padding-block-end")}}         | {{cssxref("padding-bottom")}}             |
+| {{cssxref("padding-block-start")}}       | {{cssxref("padding-top")}}                |
+| {{cssxref("padding-inline-end")}}        | {{cssxref("padding-right")}}              |
+| {{cssxref("padding-inline-start")}}      | {{cssxref("padding-left")}}               |
 
 De nouvelles propriétés raccourcies sont également apparues et permettent de manipuler les deux extrêmités d'un même axe. Ces propriétés raccourcies n'ont pas de propriété physique équivalente.
 
-| Propriété                                    | Objectif                                                                                                                                                             |
-| -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{cssxref("border-block")}}         | Définit {{cssxref("border-color")}}, {{cssxref("border-style")}} et {{cssxref("border-width")}} pour les deux bordures sur l'axe de bloc. |
-| {{cssxref("border-block-color")}} | Définit `border-color` pour les deux bordures sur l'axe de bloc.                                                                                                     |
-| {{cssxref("border-block-style")}} | Définit `border-style` pour les deux bordures sur l'axe de bloc.                                                                                                     |
-| {{cssxref("border-block-width")}} | Définit `border-width` pour les deux bordures sur l'axe de bloc.                                                                                                     |
-| {{cssxref("border-inline")}}         | Définit `border-color`, `-style` et `-width` pour les deux bordures sur l'axe en ligne.                                                                              |
-| {{cssxref("border-inline-color")}} | Définit `border-color` pour les deux bordures sur l'axe en ligne.                                                                                                    |
-| {{cssxref("border-inline-style")}} | Définit `border-style` pour les deux bordures sur l'axe en ligne.                                                                                                    |
-| {{cssxref("border-inline-width")}} | Définit `border-width` pour les deux bordures sur l'axe en ligne.                                                                                                    |
-| {{cssxref("margin-block")}}         | Défnit les deux marges sur l'axe de bloc.                                                                                                                            |
-| {{cssxref("margin-inline")}}         | Défnit les deux marges sur l'axe en ligne.                                                                                                                           |
-| {{cssxref("padding-block")}}         | Définit le remplissage (_padding_) sur l'axe de bloc.                                                                                                                |
-| {{cssxref("padding-inline")}}     | Définit le remplissage (_padding_) sur l'axe en ligne.                                                                                                               |
+| Propriété                          | Objectif                                                                                                                                  |
+| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| {{cssxref("border-block")}}        | Définit {{cssxref("border-color")}}, {{cssxref("border-style")}} et {{cssxref("border-width")}} pour les deux bordures sur l'axe de bloc. |
+| {{cssxref("border-block-color")}}  | Définit `border-color` pour les deux bordures sur l'axe de bloc.                                                                          |
+| {{cssxref("border-block-style")}}  | Définit `border-style` pour les deux bordures sur l'axe de bloc.                                                                          |
+| {{cssxref("border-block-width")}}  | Définit `border-width` pour les deux bordures sur l'axe de bloc.                                                                          |
+| {{cssxref("border-inline")}}       | Définit `border-color`, `-style` et `-width` pour les deux bordures sur l'axe en ligne.                                                   |
+| {{cssxref("border-inline-color")}} | Définit `border-color` pour les deux bordures sur l'axe en ligne.                                                                         |
+| {{cssxref("border-inline-style")}} | Définit `border-style` pour les deux bordures sur l'axe en ligne.                                                                         |
+| {{cssxref("border-inline-width")}} | Définit `border-width` pour les deux bordures sur l'axe en ligne.                                                                         |
+| {{cssxref("margin-block")}}        | Défnit les deux marges sur l'axe de bloc.                                                                                                 |
+| {{cssxref("margin-inline")}}       | Défnit les deux marges sur l'axe en ligne.                                                                                                |
+| {{cssxref("padding-block")}}       | Définit le remplissage (_padding_) sur l'axe de bloc.                                                                                     |
+| {{cssxref("padding-inline")}}      | Définit le remplissage (_padding_) sur l'axe en ligne.                                                                                    |
 
 ## Exemples de marges
 
diff --git a/files/fr/web/css/css_logical_properties_and_values/sizing/index.md b/files/fr/web/css/css_logical_properties_and_values/sizing/index.md
index 796e175c4047fd..d2b774bc33bb91 100644
--- a/files/fr/web/css/css_logical_properties_and_values/sizing/index.md
+++ b/files/fr/web/css/css_logical_properties_and_values/sizing/index.md
@@ -16,14 +16,14 @@ Le tableau qui suit fournit les correspondances entre les propriétés logiques
 
 Si on utilisait un mode d'écriture vertical, {{CSSxRef("inline-size")}} aurait correspondu à {{CSSxRef("height")}}.
 
-| Propriété logique                        | Propriété physique               |
-| ---------------------------------------- | -------------------------------- |
-| {{CSSxRef("inline-size")}}     | {{CSSxRef("width")}}     |
-| {{CSSxRef("block-size")}}         | {{CSSxRef("height")}}     |
-| {{CSSxRef("min-inline-size")}} | {{CSSxRef("min-width")}} |
-| {{CSSxRef("min-block-size")}} | {{CSSxRef("min-height")}} |
-| {{CSSxRef("max-inline-size")}} | {{CSSxRef("max-width")}} |
-| {{CSSxRef("max-block-size")}} | {{CSSxRef("max-height")}} |
+| Propriété logique              | Propriété physique        |
+| ------------------------------ | ------------------------- |
+| {{CSSxRef("inline-size")}}     | {{CSSxRef("width")}}      |
+| {{CSSxRef("block-size")}}      | {{CSSxRef("height")}}     |
+| {{CSSxRef("min-inline-size")}} | {{CSSxRef("min-width")}}  |
+| {{CSSxRef("min-block-size")}}  | {{CSSxRef("min-height")}} |
+| {{CSSxRef("max-inline-size")}} | {{CSSxRef("max-width")}}  |
+| {{CSSxRef("max-block-size")}}  | {{CSSxRef("max-height")}} |
 
 ## Exemple pour `width` et `height`
 
diff --git a/files/fr/web/css/css_media_queries/using_media_queries/index.md b/files/fr/web/css/css_media_queries/using_media_queries/index.md
index 34d185d15eb2a4..165351f52c8afd 100644
--- a/files/fr/web/css/css_media_queries/using_media_queries/index.md
+++ b/files/fr/web/css/css_media_queries/using_media_queries/index.md
@@ -43,37 +43,37 @@ Un type de média définit une catégorie générale d'appareil. Le type de méd
 
 Les caractéristiques média décrivent certaines caractéristiques spécifiques de l'agent utilisateur, de l'appareil d'affichage ou de l'environnement. Les expressions de caractéristique média testent leur présence ou leur valeur. Chaque expression de caractéristique doit être entourée de parenthèses.
 
-| Nom                                                                                                           | Résumé                                                                                                                           | Notes                                                                                                                                     |
-| ------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
-| {{cssxref("@media/width","width")}}                                                              | La largeur de la zone d'affichage (_viewport_)                                                                                   |                                                                                                                                           |
-| {{cssxref("@media/height","height")}}                                                              | La hauteur de la zone d'affichage                                                                                                |                                                                                                                                           |
-| {{cssxref("@media/aspect-ratio","aspect-ratio")}}                                              | Le rapport largeur/hauteur de la zone d'affichage                                                                                |                                                                                                                                           |
-| {{cssxref("@media/orientation","orientation")}}                                              | L'orientation la zone d'affichage                                                                                                |                                                                                                                                           |
-| {{cssxref("@media/resolution","resolution")}}                                                  | La densité de pixel pour l'appareil d'affichage                                                                                  |                                                                                                                                           |
-| {{cssxref("@media/scan","scan")}}                                                                  | Le processus de scan de l'appareil d'affichage                                                                                   |                                                                                                                                           |
-| {{cssxref("@media/grid","grid")}}                                                                  | Le type d'écran de l'appareil : matriciel ou grille ?                                                                            |                                                                                                                                           |
-| {{cssxref("@media/update-frequency","update")}}                                              | La fréquence de modification du contenu par l'appareil d'affichage                                                               | Ajoutée avec le niveau 4 du module de spécification _Media Queries_.                                                                      |
-| {{cssxref("@media/overflow-block","overflow-block")}}                                      | La façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage selon l'axe de bloc                      | Ajoutée avec le niveau 4 du module de spécification _Media Queries_.                                                                      |
-| {{cssxref("@media/overflow-inline","overflow-inline")}}                                      | La possibilité de faire défiler (_scroll_) le contenu qui dépasse de la zone d'affichage sur l'axe en ligne                      | Ajoutée avec le niveau 4 du module de spécification _Media Queries_.                                                                      |
-| {{cssxref("@media/color","color")}}                                                              | Le nombre de bits pour chaque composante de couleur pour l'appareil d'affichage (ou 0 si l'appareil ne gère pas les couleurs)    |                                                                                                                                           |
-| {{cssxref("@media/color-gamut","color-gamut")}}                                              | Un intervalle approximatif des couleurs prises en charge par l'agent utilisateur et l'appareil d'affichage                       | Ajoutée avec le niveau 4 du module de spécification _Media Queries_.                                                                      |
-| {{cssxref("@media/color-index","color-index")}}                                              | Le nombre d'éléments dans le tableau des couleurs de l'appareil d'affichage (ou 0 si l'appareil ne dispose pas d'un tel tableau) |                                                                                                                                           |
-| {{cssxref("@media/display-mode","display-mode")}}                                              | Le mode d'affichage de l'application, tel qu'indiqué par la propriété [`display`](/fr/docs/Web/Manifest#display) du manifeste    | Définie dans [la spécification pour les manifestes des applications web](https://w3c.github.io/manifest/#the-display-mode-media-feature). |
-| {{cssxref("@media/monochrome","monochrome")}}                                                  | Le nombre de bits par pixel pour le _frame buffer_ monochrome de l'appareil d'affichage ou 0 si l'appareil n'est pas monochrome  |                                                                                                                                           |
-| {{cssxref("@media/inverted-colors","inverted-colors")}}                                      | L'inversion (ou non) des couleurs par l'agent utilisateur ou le système d'exploitation                                           | Reportée au niveau 5 du module de spécification _Media Queries_.                                                                          |
-| {{cssxref("@media/pointer","pointer")}}                                                          | La présence d'un appareil de pointage comme mécanisme de saisie principal et sa précision                                        | Ajoutée avec le niveau 4 du module de spécification _Media Queries_.                                                                      |
-| {{cssxref("@media/hover","hover")}}                                                              | La capacité du mécanisme de saisie principal à survoler les éléments                                                             | Ajoutée avec le niveau 4 du module de spécification _Media Queries_.                                                                      |
-| {{cssxref("@media/any-pointer","any-pointer")}}                                              | La présence d'un appareil de pointage parmi les mécanismes de saisie et sa précision                                             | Ajoutée avec le niveau 4 du module de spécification _Media Queries_.                                                                      |
-| {{cssxref("@media/any-hover","any-hover")}}                                                      | La capacité d'un des mécanismes de saisie à survoler les éléments                                                                | Ajoutée avec le niveau 4 du module de spécification _Media Queries_.                                                                      |
-| {{cssxref("@media/light-level","light-level")}}                                              | Le niveau de luminosité de l'environnement                                                                                       | Ajoutée avec le niveau 5 du module de spécification _Media Queries_.                                                                      |
-| {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}                  | L'utilisateur préfère que la quantité de mouvement sur la page soit réduite.                                                     | Ajoutée avec le niveau 5 du module de spécification _Media Queries_.                                                                      |
-| {{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}  | L'utilisateur préfère que la transparence utilisée sur la page soit réduite.                                                     | Ajoutée avec le niveau 5 du module de spécification _Media Queries_.                                                                      |
-| {{cssxref("@media/prefers-contrast", "prefers-contrast")}}                                  | L'utilisateur préfère que le contraste soit augmenté ou réduit entre des couleurs proches.                                       | Ajoutée avec le niveau 5 du module de spécification _Media Queries_.                                                                      |
-| {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}                      | L'utilisateur préfère utiliser un thème clair ou un thème sombre.                                                                | Ajoutée avec le niveau 5 du module de spécification _Media Queries_.                                                                      |
-| {{cssxref("@media/forced-colors", "forced-colors")}}                                          | Détecte si l'agent utilisateur restreint la palette de couleurs.                                                                 | Ajoutée avec le niveau 5 du module de spécification _Media Queries_.                                                                      |
-| {{cssxref("@media/scripting","scripting")}}                                                      | La disponibilité des fonctions de script (JavaScript par exemple)                                                                | Reportée au niveau 5 du module de spécification _Media Queries_.                                                                          |
-| {{cssxref("@media/device-width","device-width")}} {{deprecated_inline}}                     | La largeur de la surface de rendu pour l'appareil d'affichage                                                                    | Dépréciée par le niveau 4 du module de spécification _Media Queries_.                                                                     |
-| {{cssxref("@media/device-height","device-height")}} {{deprecated_inline}}                 | La hauteur de la surface de rendu pour l'appareil d'affichage                                                                    | Dépréciée par le niveau 4 du module de spécification _Media Queries_.                                                                     |
+| Nom                                                                                   | Résumé                                                                                                                           | Notes                                                                                                                                     |
+| ------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| {{cssxref("@media/width","width")}}                                                   | La largeur de la zone d'affichage (_viewport_)                                                                                   |                                                                                                                                           |
+| {{cssxref("@media/height","height")}}                                                 | La hauteur de la zone d'affichage                                                                                                |                                                                                                                                           |
+| {{cssxref("@media/aspect-ratio","aspect-ratio")}}                                     | Le rapport largeur/hauteur de la zone d'affichage                                                                                |                                                                                                                                           |
+| {{cssxref("@media/orientation","orientation")}}                                       | L'orientation la zone d'affichage                                                                                                |                                                                                                                                           |
+| {{cssxref("@media/resolution","resolution")}}                                         | La densité de pixel pour l'appareil d'affichage                                                                                  |                                                                                                                                           |
+| {{cssxref("@media/scan","scan")}}                                                     | Le processus de scan de l'appareil d'affichage                                                                                   |                                                                                                                                           |
+| {{cssxref("@media/grid","grid")}}                                                     | Le type d'écran de l'appareil : matriciel ou grille ?                                                                            |                                                                                                                                           |
+| {{cssxref("@media/update-frequency","update")}}                                       | La fréquence de modification du contenu par l'appareil d'affichage                                                               | Ajoutée avec le niveau 4 du module de spécification _Media Queries_.                                                                      |
+| {{cssxref("@media/overflow-block","overflow-block")}}                                 | La façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage selon l'axe de bloc                      | Ajoutée avec le niveau 4 du module de spécification _Media Queries_.                                                                      |
+| {{cssxref("@media/overflow-inline","overflow-inline")}}                               | La possibilité de faire défiler (_scroll_) le contenu qui dépasse de la zone d'affichage sur l'axe en ligne                      | Ajoutée avec le niveau 4 du module de spécification _Media Queries_.                                                                      |
+| {{cssxref("@media/color","color")}}                                                   | Le nombre de bits pour chaque composante de couleur pour l'appareil d'affichage (ou 0 si l'appareil ne gère pas les couleurs)    |                                                                                                                                           |
+| {{cssxref("@media/color-gamut","color-gamut")}}                                       | Un intervalle approximatif des couleurs prises en charge par l'agent utilisateur et l'appareil d'affichage                       | Ajoutée avec le niveau 4 du module de spécification _Media Queries_.                                                                      |
+| {{cssxref("@media/color-index","color-index")}}                                       | Le nombre d'éléments dans le tableau des couleurs de l'appareil d'affichage (ou 0 si l'appareil ne dispose pas d'un tel tableau) |                                                                                                                                           |
+| {{cssxref("@media/display-mode","display-mode")}}                                     | Le mode d'affichage de l'application, tel qu'indiqué par la propriété [`display`](/fr/docs/Web/Manifest#display) du manifeste    | Définie dans [la spécification pour les manifestes des applications web](https://w3c.github.io/manifest/#the-display-mode-media-feature). |
+| {{cssxref("@media/monochrome","monochrome")}}                                         | Le nombre de bits par pixel pour le _frame buffer_ monochrome de l'appareil d'affichage ou 0 si l'appareil n'est pas monochrome  |                                                                                                                                           |
+| {{cssxref("@media/inverted-colors","inverted-colors")}}                               | L'inversion (ou non) des couleurs par l'agent utilisateur ou le système d'exploitation                                           | Reportée au niveau 5 du module de spécification _Media Queries_.                                                                          |
+| {{cssxref("@media/pointer","pointer")}}                                               | La présence d'un appareil de pointage comme mécanisme de saisie principal et sa précision                                        | Ajoutée avec le niveau 4 du module de spécification _Media Queries_.                                                                      |
+| {{cssxref("@media/hover","hover")}}                                                   | La capacité du mécanisme de saisie principal à survoler les éléments                                                             | Ajoutée avec le niveau 4 du module de spécification _Media Queries_.                                                                      |
+| {{cssxref("@media/any-pointer","any-pointer")}}                                       | La présence d'un appareil de pointage parmi les mécanismes de saisie et sa précision                                             | Ajoutée avec le niveau 4 du module de spécification _Media Queries_.                                                                      |
+| {{cssxref("@media/any-hover","any-hover")}}                                           | La capacité d'un des mécanismes de saisie à survoler les éléments                                                                | Ajoutée avec le niveau 4 du module de spécification _Media Queries_.                                                                      |
+| {{cssxref("@media/light-level","light-level")}}                                       | Le niveau de luminosité de l'environnement                                                                                       | Ajoutée avec le niveau 5 du module de spécification _Media Queries_.                                                                      |
+| {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}                | L'utilisateur préfère que la quantité de mouvement sur la page soit réduite.                                                     | Ajoutée avec le niveau 5 du module de spécification _Media Queries_.                                                                      |
+| {{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}    | L'utilisateur préfère que la transparence utilisée sur la page soit réduite.                                                     | Ajoutée avec le niveau 5 du module de spécification _Media Queries_.                                                                      |
+| {{cssxref("@media/prefers-contrast", "prefers-contrast")}}                            | L'utilisateur préfère que le contraste soit augmenté ou réduit entre des couleurs proches.                                       | Ajoutée avec le niveau 5 du module de spécification _Media Queries_.                                                                      |
+| {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}                    | L'utilisateur préfère utiliser un thème clair ou un thème sombre.                                                                | Ajoutée avec le niveau 5 du module de spécification _Media Queries_.                                                                      |
+| {{cssxref("@media/forced-colors", "forced-colors")}}                                  | Détecte si l'agent utilisateur restreint la palette de couleurs.                                                                 | Ajoutée avec le niveau 5 du module de spécification _Media Queries_.                                                                      |
+| {{cssxref("@media/scripting","scripting")}}                                           | La disponibilité des fonctions de script (JavaScript par exemple)                                                                | Reportée au niveau 5 du module de spécification _Media Queries_.                                                                          |
+| {{cssxref("@media/device-width","device-width")}} {{deprecated_inline}}               | La largeur de la surface de rendu pour l'appareil d'affichage                                                                    | Dépréciée par le niveau 4 du module de spécification _Media Queries_.                                                                     |
+| {{cssxref("@media/device-height","device-height")}} {{deprecated_inline}}             | La hauteur de la surface de rendu pour l'appareil d'affichage                                                                    | Dépréciée par le niveau 4 du module de spécification _Media Queries_.                                                                     |
 | {{cssxref("@media/device-aspect-ratio","device-aspect-ratio")}} {{deprecated_inline}} | Le rapport largeur/hauteur de la surface de rendu pour l'appareil d'affichage                                                    | Dépréciée par le niveau 4 du module de spécification _Media Queries_.                                                                     |
 
 ### Opérateurs logiques
diff --git a/files/fr/web/css/css_media_queries/using_media_queries_for_accessibility/index.md b/files/fr/web/css/css_media_queries/using_media_queries_for_accessibility/index.md
index ec08fa0fee4f49..375953d30065d8 100644
--- a/files/fr/web/css/css_media_queries/using_media_queries_for_accessibility/index.md
+++ b/files/fr/web/css/css_media_queries/using_media_queries_for_accessibility/index.md
@@ -78,9 +78,13 @@ Les déclarations suivantes s'appliqueront respectivement aux applications qui s
   /* Toutes les règles appliquées en contraste élevé */
 }
 @media screen and (-ms-high-contrast: black-on-white) {
-  div { background-image: url('image-bw.png'); }
+  div {
+    background-image: url("image-bw.png");
+  }
 }
 @media screen and (-ms-high-contrast: white-on-black) {
-  div { background-image: url('image-wb.png'); }
+  div {
+    background-image: url("image-wb.png");
+  }
 }
 ```
diff --git a/files/fr/web/css/css_multicol_layout/using_multicol_layouts/index.md b/files/fr/web/css/css_multicol_layout/using_multicol_layouts/index.md
index e9d6a544f8701b..025bf3b2b541eb 100644
--- a/files/fr/web/css/css_multicol_layout/using_multicol_layouts/index.md
+++ b/files/fr/web/css/css_multicol_layout/using_multicol_layouts/index.md
@@ -31,21 +31,20 @@ On utilisera la propriété `column-count` pour définir le nombre de colonnes q
 ```html
 <div id="col">
   <p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-    sed do eiusmod tempor incididunt ut labore et dolore magna
-    aliqua.
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua.
   </p>
   <p>
-    Ut enim ad minim veniam, quis nostrud exercitation ullamco
-    laboris nisi ut aliquip ex ea commodo consequat.
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+    aliquip ex ea commodo consequat.
   </p>
   <p>
-    Duis aute irure dolor in reprehenderit in voluptate velit
-    esse cillum dolore eu fugiat nulla pariatur.
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+    eu fugiat nulla pariatur.
   </p>
   <p>
-    Excepteur sint occaecat cupidatat non proident, sunt in
-    culpa qui officia deserunt mollit anim id est laborum.
+    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+    deserunt mollit anim id est laborum.
   </p>
 </div>
 ```
@@ -72,14 +71,12 @@ La propriété `column-width` permet quant à elle de définir la largeur minima
 
 ```html
 <div id="wid">
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-  sed do eiusmod tempor incididunt ut labore et dolore magna
-  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-  ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  Duis aute irure dolor in reprehenderit in voluptate velit
-  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-  occaecat cupidatat non proident, sunt in culpa qui officia
-  deserunt mollit anim id est laborum
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+  proident, sunt in culpa qui officia deserunt mollit anim id est laborum
 </div>
 ```
 
@@ -107,14 +104,12 @@ Ainsi, la déclaration `column-width:12em` pourra être remplacée de la façon
 
 ```html
 <div id="col_short">
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-  sed do eiusmod tempor incididunt ut labore et dolore magna
-  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-  ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  Duis aute irure dolor in reprehenderit in voluptate velit
-  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-  occaecat cupidatat non proident, sunt in culpa qui officia
-  deserunt mollit anim id est laborum
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+  proident, sunt in culpa qui officia deserunt mollit anim id est laborum
 </div>
 ```
 
@@ -125,7 +120,7 @@ Ainsi, la déclaration `column-width:12em` pourra être remplacée de la façon
 De même, on pourra remplacer la déclaration `column-count: 4` avec ce bloc :
 
 ```css
-#columns_4{
+#columns_4 {
   columns: 4;
 }
 ```
@@ -163,14 +158,12 @@ Entre chaque colonne, on aura un espace horizontal. La valeur recommandée (et s
 
 ```html
 <div id="column_gap">
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-  sed do eiusmod tempor incididunt ut labore et dolore magna
-  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-  ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  Duis aute irure dolor in reprehenderit in voluptate velit
-  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-  occaecat cupidatat non proident, sunt in culpa qui officia
-  deserunt mollit anim id est laborum
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+  proident, sunt in culpa qui officia deserunt mollit anim id est laborum
 </div>
 ```
 
diff --git a/files/fr/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md b/files/fr/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md
index 51f7a068f132c1..e1e4fb5f484c7a 100644
--- a/files/fr/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md
+++ b/files/fr/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md
@@ -87,37 +87,49 @@ Il est important de noter que les blocs DIV #4, DIV #5 et DIV #6 sont les enfant
 ```html
 <div id="div1">
   <h1>Élément de division n°1</h1>
-  <code>position: relative;<br/>
-  z-index: 5;</code>
+  <code
+    >position: relative;<br />
+    z-index: 5;</code
+  >
 </div>
 
 <div id="div2">
   <h1>Élément de division n°2</h1>
-  <code>position: relative;<br/>
-  z-index: 2;</code>
+  <code
+    >position: relative;<br />
+    z-index: 2;</code
+  >
 </div>
 
 <div id="div3">
   <div id="div4">
     <h1>Élément de division n°4</h1>
-    <code>position: relative;<br/>
-    z-index: 6;</code>
+    <code
+      >position: relative;<br />
+      z-index: 6;</code
+    >
   </div>
 
   <h1>Élément de division n°3</h1>
-  <code>position: absolute;<br/>
-  z-index: 4;</code>
+  <code
+    >position: absolute;<br />
+    z-index: 4;</code
+  >
 
   <div id="div5">
     <h1>Élément de division n°5</h1>
-    <code>position: relative;<br/>
-    z-index: 1;</code>
+    <code
+      >position: relative;<br />
+      z-index: 1;</code
+    >
   </div>
 
   <div id="div6">
     <h1>Élément de division n°6</h1>
-    <code>position: absolute;<br/>
-    z-index: 3;</code>
+    <code
+      >position: absolute;<br />
+      z-index: 3;</code
+    >
   </div>
 </div>
 ```
@@ -130,7 +142,9 @@ Il est important de noter que les blocs DIV #4, DIV #5 et DIV #6 sont les enfant
 }
 html {
   padding: 20px;
-  font: 12px/20px Arial, sans-serif;
+  font:
+    12px/20px Arial,
+    sans-serif;
 }
 div {
   opacity: 0.7;
diff --git a/files/fr/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md b/files/fr/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md
index 57829456918223..2cf5aba76e68bc 100644
--- a/files/fr/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md
+++ b/files/fr/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md
@@ -12,15 +12,15 @@ Commençons par un exemple simple, dans le contexte d'empilement racine nous avo
 
 Le seul et unique contexte d'empilement est le contexte racine. Sans `z-index`, les éléments sont empilés dans leur ordre d'apparition dans le code HTML.
 
-![Figure 5a&nbsp;: Exemple de contexte d'empilement 1](understanding_zindex_05a.png)
+![Figure 5a : Exemple de contexte d'empilement 1](understanding_zindex_05a.png)
 
 Si on assigne au bloc _DIV #2_ une valeur de `z-index` positive (non nulle et non automatique), il est rendu par dessus tous les autres blocs.
 
-![Figure 5b&nbsp;: Exemple de contexte d'empilement 1](understanding_zindex_05b.png)
+![Figure 5b : Exemple de contexte d'empilement 1](understanding_zindex_05b.png)
 
 Si maintenant on assigne également au bloc _DIV #4_ une valeur de `z-index` positive, plus grande que celle du _DIV #2_, le bloc _DIV #4_ est rendu par dessus tous les autres, y compris par dessus le bloc _DIV #2_.
 
-![Figure 5c&nbsp;: Exemple de contexte d'empilement 1](understanding_zindex_05c.png)
+![Figure 5c : Exemple de contexte d'empilement 1](understanding_zindex_05c.png)
 
 Dans le dernier exemple, vous pouvez voir que les blocs _DIV #2_ et _DIV #4_ ne sont pas frères, parce qu'ils appartiennent à des parents différents dans la hiérarchie des éléments HTML. Néanmoins, l'empilement du bloc _DIV #4_, tout en respectant le bloc _DIV #2_, peut être contrôlé avec la propriété `z-index`. Il se fait que les éléments _DIV #1_ et _DIV #3_ n'ayant pas de `z-index` défini, ils ne créent pas de contexte d'empilement. Cela signifie que l'ensemble de leur contenu, y compris les blocs _DIV #2_ et _DIV #3_, appartient au contexte d'empilement de la racine.
 
@@ -83,25 +83,22 @@ Dans le contexte d'empilement, les blocs _DIV #1_ et _DIV #3_ sont simplement as
 
 ```html
 <div id="div1">
-  <br/>
+  <br />
   <span class="bold">DIV #1</span>
-  <br/>position: relative;
+  <br />position: relative;
   <div id="div2">
-    <br/><span class="bold">DIV #2</span>
-    <br/>position: absolute;
-     <br/>z-index: 1;
+    <br /><span class="bold">DIV #2</span> <br />position: absolute;
+    <br />z-index: 1;
   </div>
 </div>
 
-<br/>
+<br />
 
 <div id="div3">
-  <b/><span class="bold">DIV #3</span>
-  <br/>position: relative;
+  <b /><span class="bold">DIV #3</span> <br />position: relative;
   <div id="div4">
-    <br/><span class="bold">DIV #4</span>
-    <br/>position: absolute;
-    <br/>z-index: 2;
+    <br /><span class="bold">DIV #4</span> <br />position: absolute;
+    <br />z-index: 2;
   </div>
 </div>
 ```
diff --git a/files/fr/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md b/files/fr/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md
index 50a352de1f77e5..687fa8f7584cc5 100644
--- a/files/fr/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md
+++ b/files/fr/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md
@@ -52,7 +52,8 @@ span.bold {
   z-index: 10;
 }
 
-#div1,#div3 {
+#div1,
+#div3 {
   height: 80px;
   position: relative;
   border: 1px dashed #669966;
@@ -89,28 +90,24 @@ span.bold {
 ### HTML
 
 ```html
-<br/>
+<br />
 
 <div id="div1">
-  <br/><span class="bold">DIV #1</span>
-  <br/>position: relative;
+  <br /><span class="bold">DIV #1</span> <br />position: relative;
   <div id="div2">
-    <br/><span class="bold">DIV #2</span>
-    <br/>position: absolute;
-    <br/>z-index: 2;
+    <br /><span class="bold">DIV #2</span> <br />position: absolute;
+    <br />z-index: 2;
   </div>
 </div>
 
-<br/>
+<br />
 
 <div id="div3">
-  <br/><span class="bold">DIV #3</span>
-  <br/>position: relative;
-  <br/>z-index: 1;
+  <br /><span class="bold">DIV #3</span> <br />position: relative;
+  <br />z-index: 1;
   <div id="div4">
-    <br/><span class="bold">DIV #4</span>
-    <br/>position: absolute;
-    <br/>z-index: 10;
+    <br /><span class="bold">DIV #4</span> <br />position: absolute;
+    <br />z-index: 10;
   </div>
 </div>
 ```
diff --git a/files/fr/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md b/files/fr/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md
index 788451be3b8ec5..cf9ce39c12f71f 100644
--- a/files/fr/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md
+++ b/files/fr/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md
@@ -105,14 +105,13 @@ div.lev3 {
 ### HTML
 
 ```html
-<br/>
+<br />
 
 <div class="lev1">
-<span class="bold">LEVEL #1</span>
+  <span class="bold">LEVEL #1</span>
   <div id="container1">
     <div class="lev2">
-      <br/><span class="bold">LEVEL #2</span>
-      <br/>z-index: 1;
+      <br /><span class="bold">LEVEL #2</span> <br />z-index: 1;
       <div id="container2">
         <div class="lev3"><span class="bold">LEVEL #3</span></div>
         <div class="lev3"><span class="bold">LEVEL #3</span></div>
@@ -128,8 +127,7 @@ div.lev3 {
       </div>
     </div>
     <div class="lev2">
-      <br/><span class="bold">LEVEL #2</span>
-      <br/>z-index: 1;
+      <br /><span class="bold">LEVEL #2</span> <br />z-index: 1;
     </div>
   </div>
 </div>
diff --git a/files/fr/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md b/files/fr/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md
index 4407e579e55c73..492739e5a6f71d 100644
--- a/files/fr/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md
+++ b/files/fr/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md
@@ -34,22 +34,17 @@ Ce comportement peut être expliqué en améliorant la liste précédente :
 ### HTML
 
 ```html
-<div id="abs1">
-  <b>DIV #1</b><br />position: absolute;</div>
+<div id="abs1"><b>DIV #1</b><br />position: absolute;</div>
 
-<div id="flo1">
-  <b>DIV #2</b><br />float: left;</div>
+<div id="flo1"><b>DIV #2</b><br />float: left;</div>
 
-<div id="flo2">
-  <b>DIV #3</b><br />float: right;</div>
+<div id="flo2"><b>DIV #3</b><br />float: right;</div>
 
 <br />
 
-<div id="sta1">
-  <b>DIV #4</b><br />no positioning</div>
+<div id="sta1"><b>DIV #4</b><br />no positioning</div>
 
-<div id="abs2">
-  <b>DIV #5</b><br />position: absolute;</div>
+<div id="abs2"><b>DIV #5</b><br />position: absolute;</div>
 ```
 
 ### CSS
diff --git a/files/fr/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md b/files/fr/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md
index ffbcf29f05ca5f..88dc3e0c9fc079 100644
--- a/files/fr/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md
+++ b/files/fr/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md
@@ -31,16 +31,11 @@ Dans l'exemple suivant, les blocs en position absolue et relative sont correctem
 ### HTML
 
 ```html
-<div id="abs1" class="absolute">
-  <b>DIV #1</b><br />position: absolute;</div>
-<div id="rel1" class="relative">
-  <b>DIV #2</b><br />position: relative;</div>
-<div id="rel2" class="relative">
-  <b>DIV #3</b><br />position: relative;</div>
-<div id="abs2" class="absolute">
-  <b>DIV #4</b><br />position: absolute;</div>
-<div id="sta1" class="static">
-  <b>DIV #5</b><br />position: static;</div>
+<div id="abs1" class="absolute"><b>DIV #1</b><br />position: absolute;</div>
+<div id="rel1" class="relative"><b>DIV #2</b><br />position: relative;</div>
+<div id="rel2" class="relative"><b>DIV #3</b><br />position: relative;</div>
+<div id="abs2" class="absolute"><b>DIV #4</b><br />position: absolute;</div>
+<div id="sta1" class="static"><b>DIV #5</b><br />position: static;</div>
 ```
 
 ### CSS
diff --git a/files/fr/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md b/files/fr/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md
index 32f1b9a6e617d5..c19afa63e5af5e 100644
--- a/files/fr/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md
+++ b/files/fr/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md
@@ -42,32 +42,27 @@ Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisa
 ```html
 <div id="abs1">
   <b>DIV #1</b>
-  <br />position: absolute;
-  <br />z-index: 5;
+  <br />position: absolute; <br />z-index: 5;
 </div>
 
 <div id="rel1">
   <b>DIV #2</b>
-  <br />position: relative;
-  <br />z-index: 3;
+  <br />position: relative; <br />z-index: 3;
 </div>
 
 <div id="rel2">
   <b>DIV #3</b>
-  <br />position: relative;
-  <br />z-index: 2;
+  <br />position: relative; <br />z-index: 2;
 </div>
 
 <div id="abs2">
   <b>DIV #4</b>
-  <br />position: absolute;
-  <br />z-index: 1;
+  <br />position: absolute; <br />z-index: 1;
 </div>
 
 <div id="sta1">
   <b>DIV #5</b>
-  <br />no positioning
-  <br />z-index: 8;
+  <br />no positioning <br />z-index: 8;
 </div>
 ```
 
diff --git a/files/fr/web/css/css_scrollbars_styling/index.md b/files/fr/web/css/css_scrollbars_styling/index.md
index e4337bd5dc597f..93450581b5a4e0 100644
--- a/files/fr/web/css/css_scrollbars_styling/index.md
+++ b/files/fr/web/css/css_scrollbars_styling/index.md
@@ -27,7 +27,13 @@ Dans l'exemple qui suit, on crée une barre de défilement fine avec une piste v
 ### HTML
 
 ```html
-<div class="scroller">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</div>
+<div class="scroller">
+  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
+  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
+  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
+  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
+  earthnut pea peanut soko zucchini.
+</div>
 ```
 
 ### Résultat
diff --git a/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md
index 7ca997abe34455..444a87c09b36b8 100644
--- a/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md
+++ b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md
@@ -40,11 +40,13 @@ Si le but est de créer un style commun qui s'appliquera à tous les éléments
 
 ## Exemple
 
-Dans l'exemple suivant, cinq liens pointent chacun vers une portion du même document. Actionner le lien « Premier », par exemple, fera en sorte que le` <h1 id="un"> `devienne l'élément cible. Notons que le document pourrait défiler vers une nouvelle position, jusqu'à la cible du lien.
+Dans l'exemple suivant, cinq liens pointent chacun vers une portion du même document. Actionner le lien « Premier », par exemple, fera en sorte que le `<h1 id="un">` devienne l'élément cible. Notons que le document pourrait défiler vers une nouvelle position, jusqu'à la cible du lien.
 
 ```html
-<h4 id="un">...</h4> <p id="deux">...</p>
-<div id="trois">...</div> <a id="quatre">...</a> <em id="cinq">...</em>
+<h4 id="un">...</h4>
+<p id="deux">...</p>
+<div id="trois">...</div>
+<a id="quatre">...</a> <em id="cinq">...</em>
 
 <a href="#un">Premier</a>
 <a href="#deux">Deuxième</a>