diff --git a/.prettierignore b/.prettierignore index fc7e94e53d6cca..3a352bf64221a6 100644 --- a/.prettierignore +++ b/.prettierignore @@ -20,6 +20,10 @@ build/ /files/fr/glossary/grid_lines/index.md /files/fr/glossary/main_axis/index.md /files/fr/learn/server-side/django/forms/index.md +/files/fr/web/css/align-self/index.md +/files/fr/web/css/justify-content/index.md +/files/fr/web/css/place-items/index.md +/files/fr/web/css/place-self/index.md /files/pt-br/learn/server-side/django/forms/index.md /files/ru/learn/server-side/django/forms/index.md /files/ru/learn/server-side/django/introduction/index.md diff --git a/files/fr/web/css/shorthand_properties/index.md b/files/fr/web/css/shorthand_properties/index.md index 92b664a894572f..848d0d75a0cdef 100644 --- a/files/fr/web/css/shorthand_properties/index.md +++ b/files/fr/web/css/shorthand_properties/index.md @@ -16,98 +16,98 @@ Bien que les propriétés raccourcies soient pratiques à utiliser. Il est néce 1. Une valeur qui n'est pas définie pour la propriété raccourcie **sera réinitialisée avec sa valeur initiale**. Cela peut sembler anecdotique mais attention aux valeurs qui seront surchargées et à l'ordre des déclarations. Ainsi : - ```css - background-color: red; - background: url(images/bg.gif) no-repeat top right; - ``` + ```css + background-color: red; + background: url(images/bg.gif) no-repeat top right; + ``` - ne définira pas la couleur d'arrière-plan en rouge mais avec la valeur par défaut de {{cssxref("background-color")}} `transparent` car la deuxième déclaration prend le pas sur la première. + ne définira pas la couleur d'arrière-plan en rouge mais avec la valeur par défaut de {{cssxref("background-color")}} `transparent` car la deuxième déclaration prend le pas sur la première. 2. L'héritage des propriétés ne peut avoir lieu qu'avec les propriétés individuelles . En effet, les valeurs absentes sont remplacées par leurs valeurs initiales et il est donc impossible d'hériter des valeurs en les omettant. Le mot-clé {{cssxref("inherit")}} pourra être appliqué à une propriété mais ce sera sur l'ensemble et non pour une valeur donnée ou une autre. Ainsi, pour utiliser une valeur héritée sur une propriété spécifique, il faudra utiliser cette propriété « longue » avec le mot-clé `inherit.` 3. Les propriétés raccourcies n'ont pas d'ordre spécifique pour trier les valeurs des propriétés détaillées qu'elles remplacent. Cela fonctionne sans problème lorsque les différentes propriétés utilisent différents types de valeurs car l'ordre n'a alors aucune importance. Toutefois, lorsque les différentes propriétés peuvent prendre les mêmes valeurs, cela n'est pas si simple. On peut regrouper les différents cas en deux catégories distinctes : - 1. Les propriétés raccourcies qui gèrent les bords d'une boîte telles que {{cssxref("border-style")}}, {{cssxref("margin")}} ou {{cssxref("padding")}}. Elles utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs : - - - - - - - - - - - - - - - - - - - - -
border1.png - 1 valeur : border-width: 1em — La valeur unique - s'adresse à tous les côtés. -
border2.png - 2 valeurs : border-width: 1em 2em — La première - valeur représente les côtés horizontaux en haut et en bas. La seconde - valeur représente les côtés verticaux, à gauche et à droite. -
border3.png - 3 valeurs : border-width: 1em 2em 3em — La - première valeur représente le côté haut, la deuxième les côtés gauche et - droit et la troisième représente le côté bas. -
border4.png -

- 4 valeurs : border-width: 1em 2em 3em 4em — Les - quatre valeurs représentent respectivement le côté haut, le côté - droit, le côté bas et le côté haut, toujours dans cet ordre (le sens - horaire). -

-
- - 2. De la même façon, les propriétés raccourcies relatives aux coins d'une boîte comme {{cssxref("border-radius")}} utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs : - - - - - - - - - - - - - - - - - - - - -
corner1.png - 1 valeur : border-radius: 1em — La valeur - s'applique à tous les coins. -
corner2.png - 2 valeurs : border-radius: 1em 2em — La première - valeur s'applique aux coins en haut à gauche et en bas à droite et la - deuxième s'applique aux coins en haut à droite et en bas à gauche. -
corner3.png - 3 valeurs : border-radius: 1em 2em 3em — La - première valeur représente le coin en haut à gauche, la deuxième - représente les coins en haut à droite et en bas à gauche et la troisième - valeur représente le coin en bas à droite. -
corner4.png -

- 4 valeurs : border-radius: 1em 2em 3em 4em — Les - quatre valeurs s'appliquent respectivement au coin en haut à gauche, - en haut à droite, en bas à droite et en bas à gauche, toujours dans - cet ordre (le sens horaire). -

-
+ 1. Les propriétés raccourcies qui gèrent les bords d'une boîte telles que {{cssxref("border-style")}}, {{cssxref("margin")}} ou {{cssxref("padding")}}. Elles utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs : + + + + + + + + + + + + + + + + + + + + +
border1.png + 1 valeur : border-width: 1em — La valeur unique + s'adresse à tous les côtés. +
border2.png + 2 valeurs : border-width: 1em 2em — La première + valeur représente les côtés horizontaux en haut et en bas. La seconde + valeur représente les côtés verticaux, à gauche et à droite. +
border3.png + 3 valeurs : border-width: 1em 2em 3em — La + première valeur représente le côté haut, la deuxième les côtés gauche et + droit et la troisième représente le côté bas. +
border4.png +

+ 4 valeurs : border-width: 1em 2em 3em 4em — Les + quatre valeurs représentent respectivement le côté haut, le côté + droit, le côté bas et le côté haut, toujours dans cet ordre (le sens + horaire). +

+
+ + 2. De la même façon, les propriétés raccourcies relatives aux coins d'une boîte comme {{cssxref("border-radius")}} utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs : + + + + + + + + + + + + + + + + + + + + +
corner1.png + 1 valeur : border-radius: 1em — La valeur + s'applique à tous les coins. +
corner2.png + 2 valeurs : border-radius: 1em 2em — La première + valeur s'applique aux coins en haut à gauche et en bas à droite et la + deuxième s'applique aux coins en haut à droite et en bas à gauche. +
corner3.png + 3 valeurs : border-radius: 1em 2em 3em — La + première valeur représente le coin en haut à gauche, la deuxième + représente les coins en haut à droite et en bas à gauche et la troisième + valeur représente le coin en bas à droite. +
corner4.png +

+ 4 valeurs : border-radius: 1em 2em 3em 4em — Les + quatre valeurs s'appliquent respectivement au coin en haut à gauche, + en haut à droite, en bas à droite et en bas à gauche, toujours dans + cet ordre (le sens horaire). +

+
## Les propriétés concernant l'arrière-plan @@ -137,7 +137,7 @@ Les déclarations suivantes : ```css font-style: italic; font-weight: bold; -font-size: .8em; +font-size: 0.8em; line-height: 1.2; font-family: Arial, sans-serif; ``` @@ -145,7 +145,9 @@ font-family: Arial, sans-serif; Peuvent être synthétisées en une seule déclaration avec la propriété raccourcie : ```css -font: italic bold .8em/1.2 Arial, sans-serif; +font: + italic bold 0.8em/1.2 Arial, + sans-serif; ``` > **Note :** Pour être tout à fait précis, la déclaration raccourcie précédente est équivalente aux déclarations détaillées ci-avant auxquelles on ajoutera `font-variant: normal` et `font-size-adjust: none` (CSS2.0 / CSS3), `font-stretch: normal` (CSS3). diff --git a/files/fr/web/css/specificity/index.md b/files/fr/web/css/specificity/index.md index f28084d5f9fb17..1af0d01bd23454 100644 --- a/files/fr/web/css/specificity/index.md +++ b/files/fr/web/css/specificity/index.md @@ -43,26 +43,36 @@ Lorsqu'une règle `important` est utilisée dans une déclaration de style, cett 1. Utiliser mieux la cascade CSS 2. Utiliser davantage des règles spécifiques. En indiquant un ou plusieurs éléments avant l'élément sélectionné, la règle devient plus spécifique et sa priorité est accrue : - ```html -
- Texte -
- ``` - - ```css - div#test span { color: green; } - div span { color: blue; } - span { color: red; } - ``` - - L'ordre n'a aucune importance, le texte sera en vert (_green_) car cette règle est plus spécifique. (Également, la règle pour bleu est prioritaire par rapport à celle pour rouge, là encore l'ordre n'a pas d'importance) + ```html +
+ Texte +
+ ``` + + ```css + div#test span { + color: green; + } + div span { + color: blue; + } + span { + color: red; + } + ``` + + L'ordre n'a aucune importance, le texte sera en vert (_green_) car cette règle est plus spécifique. (Également, la règle pour bleu est prioritaire par rapport à celle pour rouge, là encore l'ordre n'a pas d'importance) 3. En rapport avec le point 2, le fait de dupliquer des sélecteurs simples afin d''augmenter la spécificité lorsque vous n'avez aucun autre moyen de le faire, n'a aucun sens. - ```css - #monId#monId span { color: yellow; } - .maClasse.maClasse span { color: orange; } - ``` + ```css + #monId#monId span { + color: yellow; + } + .maClasse.maClasse span { + color: orange; + } + ``` #### Utilisation de !important @@ -105,15 +115,23 @@ A) Ajouter une autre règle CSS avec `!important` et, soit donner au sélecteur Quelques exemples avec une spécificité accrue : ```css -table td { height: 50px !important; } -.monTableau td { height: 50px !important; } -#monTableau td { height: 50px !important; } +table td { + height: 50px !important; +} +.monTableau td { + height: 50px !important; +} +#monTableau td { + height: 50px !important; +} ``` B) Ou ajouter le même sélecteur après le sélecteur existant : ```css -td { height: 50px !important; } +td { + height: 50px !important; +} ``` C) Ou, de préférence, réécrire la règle d'origine afin d'éviter totalement l'utilisation de `!important`. @@ -200,7 +218,12 @@ div p { ```html hidden
-⚠️ Votre navigateur ne prend pas en charge la pseudo-classe :where(). + ⚠️ Votre navigateur ne prend pas en charge la pseudo-classe + :where().
``` diff --git a/files/fr/web/css/specified_value/index.md b/files/fr/web/css/specified_value/index.md index c8dfcef549479b..550d8319285050 100644 --- a/files/fr/web/css/specified_value/index.md +++ b/files/fr/web/css/specified_value/index.md @@ -19,14 +19,17 @@ La **valeur définie** d'une propriété CSS est celle explicitement définie da ```html

Ma couleur provient explicitement de la feuille de style CSS.

-
Les valeurs définies de mes propriétés utilisent - les valeurs initiales (par défaut) car aucune n'est fournie - dans la feuille de style CSS.
+
+ Les valeurs définies de mes propriétés utilisent les valeurs initiales (par + défaut) car aucune n'est fournie dans la feuille de style CSS. +
-

La valeur définie pour ma police n'est pas fournie explicitement - dans la feuille de style et est donc héritée de mon parent. - Toutefois, la bordure n'est pas une propriété héritée.

+

+ La valeur définie pour ma police n'est pas fournie explicitement dans la + feuille de style et est donc héritée de mon parent. Toutefois, la bordure + n'est pas une propriété héritée. +

``` diff --git a/files/fr/web/css/syntax/index.md b/files/fr/web/css/syntax/index.md index 09ff43d86753d0..d843f602fb8347 100644 --- a/files/fr/web/css/syntax/index.md +++ b/files/fr/web/css/syntax/index.md @@ -4,6 +4,7 @@ slug: Web/CSS/Syntax l10n: sourceCommit: 71c4bc0b6329ec40ddbefd8d3124547e91cfa612 --- + {{CSSRef}} L'objectif fondamental du langage Cascading Style Sheets ([CSS](/fr/docs/Web/CSS)) est de permettre à un moteur de navigation d'associer des fonctionnalités spécifiques, comme les couleurs, le positionnement ou les décorations à des éléments de la page. La _syntaxe CSS_ reflète cet objectif et ses éléments de base sont : diff --git a/files/fr/web/css/tab-size/index.md b/files/fr/web/css/tab-size/index.md index 5f980132ddbbbc..82ac42bbfd6834 100644 --- a/files/fr/web/css/tab-size/index.md +++ b/files/fr/web/css/tab-size/index.md @@ -45,6 +45,7 @@ tab-size: unset; ### HTML + ```html 
 	print "tabulation avant"
diff --git a/files/fr/web/css/table-layout/index.md b/files/fr/web/css/table-layout/index.md
index 5fcef30147920b..b1531ead3fa479 100644
--- a/files/fr/web/css/table-layout/index.md
+++ b/files/fr/web/css/table-layout/index.md
@@ -69,7 +69,8 @@ Cet exemple utilise `table-layout: fixed` et une largeur donnée (avec la propri
   border: 1px solid red;
 }
 
-tr, td {
+tr,
+td {
   border: solid;
 }
 
diff --git a/files/fr/web/css/text-align/index.md b/files/fr/web/css/text-align/index.md
index edcb6f0a29087e..8f231b8610e8b5 100644
--- a/files/fr/web/css/text-align/index.md
+++ b/files/fr/web/css/text-align/index.md
@@ -76,10 +76,10 @@ La propriété `text-align` peut être définie grâce à l'un des mots-clés de
 ```html
 

   Il y avait en Vestphalie, dans le château de M. le baron de
-  Thunder-ten-tronckh, un jeune garçon à qui la nature avait
-  donné les moeurs les plus douces. Sa physionomie annonçait
-  son âme. Il avait le jugement assez droit, avec l’esprit le plus
-  simple ; c’est, je crois, pour cette raison qu’on le nommait Candide.
+  Thunder-ten-tronckh, un jeune garçon à qui la nature avait donné les moeurs
+  les plus douces. Sa physionomie annonçait son âme. Il avait le jugement assez
+  droit, avec l’esprit le plus simple ; c’est, je crois, pour cette raison qu’on
+  le nommait Candide.
 

 ```
 
@@ -103,10 +103,10 @@ La propriété `text-align` peut être définie grâce à l'un des mots-clés de
 ```html
 

   Il y avait en Vestphalie, dans le château de M. le baron de
-  Thunder-ten-tronckh, un jeune garçon à qui la nature avait
-  donné les moeurs les plus douces. Sa physionomie annonçait
-  son âme. Il avait le jugement assez droit, avec l’esprit le plus
-  simple ; c’est, je crois, pour cette raison qu’on le nommait Candide.
+  Thunder-ten-tronckh, un jeune garçon à qui la nature avait donné les moeurs
+  les plus douces. Sa physionomie annonçait son âme. Il avait le jugement assez
+  droit, avec l’esprit le plus simple ; c’est, je crois, pour cette raison qu’on
+  le nommait Candide.
 

 ```
 
@@ -130,10 +130,10 @@ La propriété `text-align` peut être définie grâce à l'un des mots-clés de
 ```html
 

   Il y avait en Vestphalie, dans le château de M. le baron de
-  Thunder-ten-tronckh, un jeune garçon à qui la nature avait
-  donné les moeurs les plus douces. Sa physionomie annonçait
-  son âme. Il avait le jugement assez droit, avec l’esprit le plus
-  simple ; c’est, je crois, pour cette raison qu’on le nommait Candide.
+  Thunder-ten-tronckh, un jeune garçon à qui la nature avait donné les moeurs
+  les plus douces. Sa physionomie annonçait son âme. Il avait le jugement assez
+  droit, avec l’esprit le plus simple ; c’est, je crois, pour cette raison qu’on
+  le nommait Candide.
 

 ```
 
@@ -178,7 +178,7 @@ La méthode la plus générique pour centrer un bloc plutot que de centrer son c
 L'espacement créé entre les mots par la justification du texte peut rendre la lecture difficile pour les personnes dyslexiques ou souffrant de troubles cognitifs.
 
 - [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.8  | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
+- [_Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
 
 ## Spécifications
 
diff --git a/files/fr/web/css/text-combine-upright/index.md b/files/fr/web/css/text-combine-upright/index.md
index 9d8287c5c4e9cb..e757bbfbf87b31 100644
--- a/files/fr/web/css/text-combine-upright/index.md
+++ b/files/fr/web/css/text-combine-upright/index.md
@@ -16,7 +16,7 @@ text-combine-upright: none;
 text-combine-upright: all;
 
 /* Valeurs pour les chiffres */
-text-combine-upright: digits;   /* 2 chiffres qui se suivent prendront la place d'un caractère dans du texte 
+text-combine-upright: digits; /* 2 chiffres qui se suivent prendront la place d'un caractère dans du texte 
                                    vertical */
 text-combine-upright: digits 4; /* Compresse jusqu'à 4 chiffres consécutifs afin qu'ils occupent l'espace 
                                    d'un caractère dans du texte vertical */
@@ -80,16 +80,24 @@ Pour utiliser `all`, on devra baliser chaque fragment de texte horizontal mais c
 #### HTML
 
 ```html
-
民國105年4月29日

+

+  民國105年4月29日
+

 ```
 
 #### CSS
 
 ```css
-html { writing-mode: vertical-rl; font: 24px serif }
-.num { text-combine-upright: all }
+html {
+  writing-mode: vertical-rl;
+  font: 24px serif;
+}
+.num {
+  text-combine-upright: all;
+}
 ```
 
 #### Résultat
diff --git a/files/fr/web/css/text-decoration-line/index.md b/files/fr/web/css/text-decoration-line/index.md
index d691adde126b27..0d96d3aa781202 100644
--- a/files/fr/web/css/text-decoration-line/index.md
+++ b/files/fr/web/css/text-decoration-line/index.md
@@ -22,8 +22,8 @@ text-decoration-line: overline;
 text-decoration-line: line-through;
 
 /* Valeurs avec plusieurs mots-clés */
-text-decoration-line: underline overline;                /* On a deux décorations pour la ligne */
-text-decoration-line: overline underline line-through;   /* On a plusieurs décorations */
+text-decoration-line: underline overline; /* On a deux décorations pour la ligne */
+text-decoration-line: overline underline line-through; /* On a plusieurs décorations */
 
 /* Valeurs globales */
 text-decoration-line: inherit;
diff --git a/files/fr/web/css/text-decoration-thickness/index.md b/files/fr/web/css/text-decoration-thickness/index.md
index d72df257a18acd..9f2559ecb8a4c9 100644
--- a/files/fr/web/css/text-decoration-thickness/index.md
+++ b/files/fr/web/css/text-decoration-thickness/index.md
@@ -45,7 +45,10 @@ text-decoration-thickness: unset;
 ```html
 
Voici du texte avec un soulignement rouge de 2px.

 
Celui est souligné et surligné.

-
Ce texte sera souligné avec une ligne bleue de 1px si la formulation raccourcie est prise en charge.

+

+  Ce texte sera souligné avec une ligne bleue de 1px si la formulation
+  raccourcie est prise en charge.
+

 ```
 
 ### CSS
diff --git a/files/fr/web/css/text-decoration/index.md b/files/fr/web/css/text-decoration/index.md
index 7f51ac3536f174..fb605e934615fc 100644
--- a/files/fr/web/css/text-decoration/index.md
+++ b/files/fr/web/css/text-decoration/index.md
@@ -16,10 +16,10 @@ La propriété **`text-decoration`** est utilisée pour « décorer » le texte
 
 ```css
 /* Valeurs avec mots-clés */
-text-decoration: none;                 /* Aucune décoration */
-text-decoration: underline red;        /* On souligne en rouge */
-text-decoration: underline wavy red;   /* On souligne en rouge avec */
-                                       /* une ligne ondulée */
+text-decoration: none; /* Aucune décoration */
+text-decoration: underline red; /* On souligne en rouge */
+text-decoration: underline wavy red; /* On souligne en rouge avec */
+/* une ligne ondulée */
 
 /* Valeurs globales */
 text-decoration: inherit;
@@ -80,10 +80,11 @@ text-decoration: unset;
 
Ce texte a une ligne en dessous.

 
Ce texte a une ligne au dessus.

 
Ce texte est barré d'une ligne.

-
Ce lien ne sera pas souligné,
-    comme les liens le sont normalement. Attention à ces décorations
-    sur les ancres cars le soulignement sert souvent d'indication pour
-    un hyperlien.

+

+  Ce lien ne sera pas souligné, comme les liens le
+  sont normalement. Attention à ces décorations sur les ancres cars le
+  soulignement sert souvent d'indication pour un hyperlien.
+

 
Ce texte a des lignes en dessous et au dessus.

 
Ce texte peut clignoter selon le navigateur utilisé.

 ```
diff --git a/files/fr/web/css/text-emphasis-position/index.md b/files/fr/web/css/text-emphasis-position/index.md
index ebcad57b27797f..9a7376a1437924 100644
--- a/files/fr/web/css/text-emphasis-position/index.md
+++ b/files/fr/web/css/text-emphasis-position/index.md
@@ -17,7 +17,6 @@ text-emphasis-position: over left;
 text-emphasis-position: under right;
 text-emphasis-position: under left;
 
-
 text-emphasis-position: left over;
 text-emphasis-position: right under;
 text-emphasis-position: left under;
@@ -124,12 +123,12 @@ D'autres préfèrent masquer le contenu ruby et privilégier les marques d'empha
 
 ```css
 em {
- /* On utilise text-emphasis pour les  */
+  /* On utilise text-emphasis pour les  */
   text-emphasis: dot;
 }
 
 em rt {
- /* On masque le ruby dans les éléments  */
+  /* On masque le ruby dans les éléments  */
   display: none;
 }
 ```
diff --git a/files/fr/web/css/text-emphasis-style/index.md b/files/fr/web/css/text-emphasis-style/index.md
index 224785139db9f6..bd3f9ca0635ecc 100644
--- a/files/fr/web/css/text-emphasis-style/index.md
+++ b/files/fr/web/css/text-emphasis-style/index.md
@@ -14,10 +14,10 @@ La propriété **`text-emphasis-style`** définit le type d'emphase utilisée. C
 text-emphasis-style: none;
 
 /*  Valeur distincte */
-text-emphasis-style: 'x';
-text-emphasis-style: '点';
-text-emphasis-style: '\25B2';
-text-emphasis-style: '*';
+text-emphasis-style: "x";
+text-emphasis-style: "点";
+text-emphasis-style: "\25B2";
+text-emphasis-style: "*";
 
 /* Valeurs avec un mot-clé */
 text-emphasis-style: filled;
diff --git a/files/fr/web/css/text-emphasis/index.md b/files/fr/web/css/text-emphasis/index.md
index 9733f7264a4c3f..b9c2d76c731526 100644
--- a/files/fr/web/css/text-emphasis/index.md
+++ b/files/fr/web/css/text-emphasis/index.md
@@ -24,13 +24,13 @@ text-emphasis: none; /* Pas de marque */
 
 /* Chaîne de caractères */
 /* Type         */
-text-emphasis: 'x';
-text-emphasis: '点';
-text-emphasis: '\25B2';
-text-emphasis: '*' #555;
+text-emphasis: "x";
+text-emphasis: "点";
+text-emphasis: "\25B2";
+text-emphasis: "*" #555;
 /* À ne pas utiliser, cela pourra être */
 /* considéré comme 't' uniquement      */
-text-emphasis: 'toto';
+text-emphasis: "toto";
 
 /* Valeurs avec mot(s)-clé(s) */
 text-emphasis: filled;
diff --git a/files/fr/web/css/text-indent/index.md b/files/fr/web/css/text-indent/index.md
index f8e3899fab0356..c5119b22ff29ac 100644
--- a/files/fr/web/css/text-indent/index.md
+++ b/files/fr/web/css/text-indent/index.md
@@ -63,10 +63,14 @@ text-indent: unset;
 #### HTML
 
 ```html
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
-nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
-nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

+

+  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+

+

+  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+

 ```
 
 #### CSS
@@ -87,10 +91,14 @@ p {
 #### HTML
 
 ```html
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
-nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
-nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

+

+  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+

+

+  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+

 ```
 
 #### CSS
diff --git a/files/fr/web/css/text-justify/index.md b/files/fr/web/css/text-justify/index.md
index 61d02e9e823532..7be64c2ac1b948 100644
--- a/files/fr/web/css/text-justify/index.md
+++ b/files/fr/web/css/text-justify/index.md
@@ -44,11 +44,36 @@ La propriété `text-justify` peut être définie grâce à l'un des mots-clés
 ## Exemples
 
 ```html
-
text-justify: none — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.

-
text-justify: auto — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.

-
text-justify: distribute — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.

-
text-justify: inter-word — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.

-
text-justify: inter-character — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.

+

+  text-justify: none — Lorem ipsum dolor sit amet, consectetur
+  adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id
+  mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat
+  justo id, feugiat leo. Cras eu elementum dui.
+

+

+  text-justify: auto — Lorem ipsum dolor sit amet, consectetur
+  adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id
+  mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat
+  justo id, feugiat leo. Cras eu elementum dui.
+

+

+  text-justify: distribute — Lorem ipsum dolor sit amet,
+  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
+  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
+  consequat justo id, feugiat leo. Cras eu elementum dui.
+

+

+  text-justify: inter-word — Lorem ipsum dolor sit amet,
+  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
+  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
+  consequat justo id, feugiat leo. Cras eu elementum dui.
+

+

+  text-justify: inter-character — Lorem ipsum dolor sit amet,
+  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
+  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
+  consequat justo id, feugiat leo. Cras eu elementum dui.
+

 ```
 
 ```css
diff --git a/files/fr/web/css/text-overflow/index.md b/files/fr/web/css/text-overflow/index.md
index a2e22f61225bea..39bb430c59962a 100644
--- a/files/fr/web/css/text-overflow/index.md
+++ b/files/fr/web/css/text-overflow/index.md
@@ -85,25 +85,36 @@ Cet exemple illustre différentes valeurs pour `text-overflow`, appliquée à un
 #### HTML
 
 ```html
-
 

   
Left to right text

   
clip

-  
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+  

+    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  

   
ellipsis

-  
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+  

+    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  

   
" [..]"

-  
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+  

+    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  

 

 
 

   
Right to left text

   
clip

-  
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+  

+    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  

   
ellipsis

-  
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+  

+    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  

   
" [..]"

-  
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+  

+    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  

 

 ```
 
@@ -158,13 +169,21 @@ Cette exemple illustre la syntaxe à deux valeurs pour `text-overflow`, où on p
 
 ```html
 
clip clip

-
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+

+  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+

 
clip ellipsis

-
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+

+  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+

 
ellipsis ellipsis

-
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+

+  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+

 
ellipsis " [..]"

-
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+

+  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+

 ```
 
 #### CSS
diff --git a/files/fr/web/css/text-rendering/index.md b/files/fr/web/css/text-rendering/index.md
index e472704ac4037e..0ddca3f9dfb1ee 100644
--- a/files/fr/web/css/text-rendering/index.md
+++ b/files/fr/web/css/text-rendering/index.md
@@ -64,8 +64,20 @@ Cet exemple illustre comment `optimizeLegibility` est automatiquement utilisé p
 #### CSS
 
 ```css
-.small { font: 19.9px "Times New Roman", "Georgia", "Palatino", serif; }
-.big   { font: 20px "Times New Roman", "Georgia", "Palatino", serif; }
+.small {
+  font:
+    19.9px "Times New Roman",
+    "Georgia",
+    "Palatino",
+    serif;
+}
+.big {
+  font:
+    20px "Times New Roman",
+    "Georgia",
+    "Palatino",
+    serif;
+}
 ```
 
 #### HTML
@@ -86,10 +98,20 @@ Cet exemple illustre la différence d'apparence entre `optimizeSpeed` et `optimi
 #### CSS
 
 ```css
-p { font: 1.5em "Times New Roman", "Georgia", "Palatino", serif }
-
-.speed       { text-rendering: optimizeSpeed; }
-.legibility  { text-rendering: optimizeLegibility; }
+p {
+  font:
+    1.5em "Times New Roman",
+    "Georgia",
+    "Palatino",
+    serif;
+}
+
+.speed {
+  text-rendering: optimizeSpeed;
+}
+.legibility {
+  text-rendering: optimizeLegibility;
+}
 ```
 
 #### HTML
diff --git a/files/fr/web/css/text-shadow/index.md b/files/fr/web/css/text-shadow/index.md
index 1c3f532c9bb0d7..bb4a76b1a3ae9b 100644
--- a/files/fr/web/css/text-shadow/index.md
+++ b/files/fr/web/css/text-shadow/index.md
@@ -66,14 +66,15 @@ Cette propriété s'applique aux deux [pseudo-éléments](/fr/docs/Web/CSS/Pseud
 
 ```css
 .red-text-shadow {
-   text-shadow: red 0 -2px;
+  text-shadow: red 0 -2px;
 }
 ```
 
 ```html
-
Sed ut perspiciatis unde omnis iste
-    natus error sit voluptatem accusantium doloremque laudantium,
-    totam rem aperiam, eaque ipsa quae ab illo inventore.

+

+  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
+

 ```
 
 {{EmbedLiveSample('Ombre_simple', '660px', '90px')}}
@@ -82,16 +83,22 @@ Cette propriété s'applique aux deux [pseudo-éléments](/fr/docs/Web/CSS/Pseud
 
 ```css
 .white-text-with-blue-shadow {
-   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
-   color: white;
-   font: 1.5em Georgia, serif;
+  text-shadow:
+    1px 1px 2px black,
+    0 0 1em blue,
+    0 0 0.2em blue;
+  color: white;
+  font:
+    1.5em Georgia,
+    serif;
 }
 ```
 
 ```html
-
Sed ut perspiciatis unde omnis iste
-    natus error sit voluptatem accusantium doloremque laudantium,
-    totam rem aperiam, eaque ipsaquae ab illo inventore.

+

+  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+  doloremque laudantium, totam rem aperiam, eaque ipsaquae ab illo inventore.
+

 ```
 
 {{EmbedLiveSample('Ombres_multiples', '660px', '170px')}}
diff --git a/files/fr/web/css/text-underline-offset/index.md b/files/fr/web/css/text-underline-offset/index.md
index 1dfdfdc18283d4..f817343c1b1709 100644
--- a/files/fr/web/css/text-underline-offset/index.md
+++ b/files/fr/web/css/text-underline-offset/index.md
@@ -53,7 +53,7 @@ p {
   text-underline-offset: 1em;
 }
 
-.deuxlignes{
+.deuxlignes {
   text-decoration-line: underline overline;
 }
 ```
@@ -61,12 +61,10 @@ p {
 ### HTML
 
 ```html
-

-  Voici un texte souligné avec une ligne ondulée rouge !
-

+
Voici un texte souligné avec une ligne ondulée rouge !

 

-  Ce texte a une ligne en dessous et une ligne au dessus.
-  Seule la ligne du dessous est déplacée.
+  Ce texte a une ligne en dessous et une ligne au dessus. Seule la ligne du
+  dessous est déplacée.
 

 ```
 
diff --git a/files/fr/web/css/text-underline-position/index.md b/files/fr/web/css/text-underline-position/index.md
index 5e52f87d23bedf..f3de0421e1d58a 100644
--- a/files/fr/web/css/text-underline-position/index.md
+++ b/files/fr/web/css/text-underline-position/index.md
@@ -67,9 +67,7 @@ Cette propriété est héritée sur les différents éléments et n'est pas réi
 ### HTML
 
 ```html
-

-  C6H12O6
-

+
C6H12O6

 

   Et là avec des indices
   et du jambage
diff --git a/files/fr/web/css/top/index.md b/files/fr/web/css/top/index.md
index 5f71aae0357271..f2feedae55c0e9 100644
--- a/files/fr/web/css/top/index.md
+++ b/files/fr/web/css/top/index.md
@@ -91,7 +91,7 @@ div {
 p.relatif {
   position: relative;
   top: 5em;
-  border: 2px black solid
+  border: 2px black solid;
 }
 ```
 
diff --git a/files/fr/web/css/touch-action/index.md b/files/fr/web/css/touch-action/index.md
index f971831037fdae..752d110d55988f 100644
--- a/files/fr/web/css/touch-action/index.md
+++ b/files/fr/web/css/touch-action/index.md
@@ -74,9 +74,12 @@ La propriété `touch-action` peut être définie grâce à :
 ### HTML
 
 ```html
-
    Ma list
+
      
+  Ma list
   
    • UnLongTexteQuiDevraitTenirSurUneLigneHeureusementQuOnAOverflowScroll
      • 
-  
    • UnAutreLongTexteQuiDevraitTenirSurUneLigneHeureusementQuOnAOverflowScroll
      • 
+  
    • 
+    UnAutreLongTexteQuiDevraitTenirSurUneLigneHeureusementQuOnAOverflowScroll
+  
      • 
 
    
 ```
 
@@ -105,7 +108,7 @@ ul > li {
 Une déclaration `touch action: none;` empêchera le navigateur de zoomer. Cela peut empêcher les personnes à faible vision de lire et de comprendre le contenu de la page.
 
 - [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.4 - Understanding WCAG 2.0 (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)
+- _[Understanding Success Criterion 1.4.4 - Understanding WCAG 2.0 (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)_
 
 ## Spécifications
 
diff --git a/files/fr/web/css/transform-box/index.md b/files/fr/web/css/transform-box/index.md
index dae2073dd23d4b..79ddcb9055e246 100644
--- a/files/fr/web/css/transform-box/index.md
+++ b/files/fr/web/css/transform-box/index.md
@@ -61,7 +61,7 @@ p {
 }
 
 .premier {
-   border: 3px black solid;
+  border: 3px black solid;
 }
 
 .deuxieme {
diff --git a/files/fr/web/css/transform-function/matrix/index.md b/files/fr/web/css/transform-function/matrix/index.md
index cd539ad7b315dc..51b516cb9345c2 100644
--- a/files/fr/web/css/transform-function/matrix/index.md
+++ b/files/fr/web/css/transform-function/matrix/index.md
@@ -109,8 +109,8 @@ p {
   background-color: teal;
 }
 
-.transformation{
-  transform: matrix(0.87,-0.5,0,0.87,0,1);
+.transformation {
+  transform: matrix(0.87, -0.5, 0, 0.87, 0, 1);
   background-color: blue;
 }
 ```
diff --git a/files/fr/web/css/transform-function/matrix3d/index.md b/files/fr/web/css/transform-function/matrix3d/index.md
index 10d96552ee2985..acc1635352b9b3 100644
--- a/files/fr/web/css/transform-function/matrix3d/index.md
+++ b/files/fr/web/css/transform-function/matrix3d/index.md
@@ -83,8 +83,25 @@ p {
   background-color: teal;
 }
 
-.transformation{
-  transform: matrix3d(0.87,-0.5,0.00,0,0.50,0.87,0.00,0,0,0,1,0,0,0,0,1);
+.transformation {
+  transform: matrix3d(
+    0.87,
+    -0.5,
+    0,
+    0,
+    0.5,
+    0.87,
+    0,
+    0,
+    0,
+    0,
+    1,
+    0,
+    0,
+    0,
+    0,
+    1
+  );
   background-color: blue;
 }
 ```
@@ -99,9 +116,9 @@ p {
 
 ```html
 
    
- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
- Quos quaerat sit soluta, quisquam exercitationem delectus qui unde in facere
- necessitatibus aut quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quaerat sit
+  soluta, quisquam exercitationem delectus qui unde in facere necessitatibus aut
+  quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
 
    
 ```
 
@@ -118,7 +135,6 @@ body {
   flex-flow: row wrap;
   justify-content: center;
   align-content: center;
-
 }
 .foo {
   width: 50%;
@@ -129,7 +145,7 @@ body {
   text-align: center;
   font-family: system-ui, sans-serif;
   font-size: 14px;
-   /* Setting up animation for better demonstration */
+  /* Setting up animation for better demonstration */
   animation: MotionScale 2s alternate linear infinite;
 }
 
@@ -144,29 +160,13 @@ body {
         Translates every Z point by 0
         Scales down by 10%
     */
-    transform: matrix3d(
-      1,0,0,0,
-      0,1,0,0,
-      0,0,1,0,
-      -50,-100,0,1.1
-    );
-
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -50, -100, 0, 1.1);
   }
   50% {
-    transform: matrix3d(
-      1,0,0,0,
-      0,1,0,0,
-      0,0,1,0,
-      0,0,0,0.9
-    );
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0.9);
   }
   to {
-     transform: matrix3d(
-      1,0,0,0,
-      0,1,0,0,
-      0,0,1,0,
-      50,100,0,1.1
-    )
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50, 100, 0, 1.1);
   }
 }
 ```
diff --git a/files/fr/web/css/transform-function/rotate3d/index.md b/files/fr/web/css/transform-function/rotate3d/index.md
index 7afe36adeaedaa..a90089d32ed571 100644
--- a/files/fr/web/css/transform-function/rotate3d/index.md
+++ b/files/fr/web/css/transform-function/rotate3d/index.md
@@ -119,8 +119,8 @@ p {
   margin: auto;
 }
 
-.transformation{
-  transform: rotate3d(0,1,0,60deg);
+.transformation {
+  transform: rotate3d(0, 1, 0, 60deg);
   background-color: blue;
 }
 ```
diff --git a/files/fr/web/css/transform-function/scale3d/index.md b/files/fr/web/css/transform-function/scale3d/index.md
index 0969a9cc77c447..a3ba8ce34a986d 100644
--- a/files/fr/web/css/transform-function/scale3d/index.md
+++ b/files/fr/web/css/transform-function/scale3d/index.md
@@ -146,6 +146,6 @@ div {
 
 - [`transform`](/fr/docs/Web/CSS/transform)
 - [``](/fr/docs/Web/CSS/transform-function)
-- [`scaleZ()`](/fr/docs/Web/CSS/transform-function/scaleZ())
-- [`translate3d()`](/fr/docs/Web/CSS/transform-function/translate3d())
-- [`rotate3d()`](/fr/docs/Web/CSS/transform-function/rotate3d())
+- [`scaleZ()`]()
+- [`translate3d()`]()
+- [`rotate3d()`]()
diff --git a/files/fr/web/css/transform-function/scalex/index.md b/files/fr/web/css/transform-function/scalex/index.md
index bc89b93c6ec726..67673bf6c9c1d6 100644
--- a/files/fr/web/css/transform-function/scalex/index.md
+++ b/files/fr/web/css/transform-function/scalex/index.md
@@ -158,8 +158,8 @@ div {
 
 ## Voir aussi
 
-- [`scaleY()`](/fr/docs/Web/CSS/transform-function/scaleY())
-- [`scaleZ()`](/fr/docs/Web/CSS/transform-function/scaleZ())
+- [`scaleY()`]()
+- [`scaleZ()`]()
 - [`transform`](/fr/docs/Web/CSS/transform)
 - [``](/fr/docs/Web/CSS/transform-function)
 - [`transform-origin`](/fr/docs/Web/CSS/transform-origin)
diff --git a/files/fr/web/css/transform-function/scaley/index.md b/files/fr/web/css/transform-function/scaley/index.md
index 4028189f46dab6..6f11f246de5a3d 100644
--- a/files/fr/web/css/transform-function/scaley/index.md
+++ b/files/fr/web/css/transform-function/scaley/index.md
@@ -127,8 +127,8 @@ div {
 
 ## Voir aussi
 
-- [`scaleX()`](/fr/docs/Web/CSS/transform-function/scaleX())
-- [`scaleZ()`](/fr/docs/Web/CSS/transform-function/scaleZ())
+- [`scaleX()`]()
+- [`scaleZ()`]()
 - [`transform`](/fr/docs/Web/CSS/transform)
 - [``](/fr/docs/Web/CSS/transform-function)
 - [`transform-origin`](/fr/docs/Web/CSS/transform-origin)
diff --git a/files/fr/web/css/transform-function/scalez/index.md b/files/fr/web/css/transform-function/scalez/index.md
index ebe09836b4c0ac..229d4c5204cc6c 100644
--- a/files/fr/web/css/transform-function/scalez/index.md
+++ b/files/fr/web/css/transform-function/scalez/index.md
@@ -117,8 +117,8 @@ div {
 
 ## Voir aussi
 
-- [`scaleX()`](/fr/docs/Web/CSS/transform-function/scaleX())
-- [`scaleY()`](/fr/docs/Web/CSS/transform-function/scaleY())
+- [`scaleX()`]()
+- [`scaleY()`]()
 - [`transform`](/fr/docs/Web/CSS/transform)
 - [``](/fr/docs/Web/CSS/transform-function)
 - [`transform-origin`](/fr/docs/Web/CSS/transform-origin)
diff --git a/files/fr/web/css/transform-function/skew/index.md b/files/fr/web/css/transform-function/skew/index.md
index 6185202a64c13c..a2cd395c31eb6c 100644
--- a/files/fr/web/css/transform-function/skew/index.md
+++ b/files/fr/web/css/transform-function/skew/index.md
@@ -170,5 +170,5 @@ div {
 
 - [`transform`](/fr/docs/Web/CSS/transform)
 - [``](/fr/docs/Web/CSS/transform-function)
-- [`skewX()`](/fr/docs/Web/CSS/transform-function/skewX())
-- [`skewY()`](/fr/docs/Web/CSS/transform-function/skewY())
+- [`skewX()`]()
+- [`skewY()`]()
diff --git a/files/fr/web/css/transform-function/translate/index.md b/files/fr/web/css/transform-function/translate/index.md
index da7cb8af332453..01bed2788e32f4 100644
--- a/files/fr/web/css/transform-function/translate/index.md
+++ b/files/fr/web/css/transform-function/translate/index.md
@@ -118,7 +118,8 @@ div {
 }
 
 .moved {
-  transform: translate(10px); /* Équivalent à : translateX(10px) ou translate(10px, 0) */
+  /* Équivalent à : translateX(10px) ou translate(10px, 0) */
+  transform: translate(10px);
   background-color: pink;
 }
 ```
diff --git a/files/fr/web/css/transform-function/translate3d/index.md b/files/fr/web/css/transform-function/translate3d/index.md
index 4f449942037d58..a408ba8dad0c3a 100644
--- a/files/fr/web/css/transform-function/translate3d/index.md
+++ b/files/fr/web/css/transform-function/translate3d/index.md
@@ -89,7 +89,7 @@ div {
 }
 
 .moved {
-  transform: perspective(500px) translate3d(10px,0px,0px);
+  transform: perspective(500px) translate3d(10px, 0px, 0px);
   /* Équivalent à perspective(500px) translateX(10px)*/
   background-color: pink;
 }
diff --git a/files/fr/web/css/transform-function/translatez/index.md b/files/fr/web/css/transform-function/translatez/index.md
index 300c75f15838b7..2700df2274d47e 100644
--- a/files/fr/web/css/transform-function/translatez/index.md
+++ b/files/fr/web/css/transform-function/translatez/index.md
@@ -112,4 +112,4 @@ Si la valeur fournie à `perspective()` est inférieure à l'argument de `transl
 - [``](/fr/docs/Web/CSS/transform-function)
 - [Les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
 - [`transform`](/fr/docs/Web/CSS/transform)
-- [`translateX()`](/fr/docs/Web/CSS/transform-function/translateX()) et [`translateY()`](/fr/docs/Web/CSS/transform-function/translateY())
+- [`translateX()`]() et [`translateY()`]()
diff --git a/files/fr/web/css/transform-origin/index.md b/files/fr/web/css/transform-origin/index.md
index fd27c5e5c41969..5a08387fe615a1 100644
--- a/files/fr/web/css/transform-origin/index.md
+++ b/files/fr/web/css/transform-origin/index.md
@@ -124,104 +124,112 @@ Cet exemple illustre ce que donnent les différentes valeurs de `transform-origi
 
 ```html hidden
 
    
+  
    
+    
     
    
+    
     
    
+  
    
 
-
    
-  
     
    
-  
     
    
-
    
-
-
    +  
     transform: none;
-
    
+
    
 
-
    
-  
     
    
-  
     
    
-
    
+  
    
+    
     
    
+    
     
    
+  
    
 
-
    +  
     transform: rotate(30deg);
-
    
+
    
 
-
    
-  
     
    
-  
     
    
-
    
+  
    
+    
     
    
+    
     
    
+  
    
 
-
    +  
     transform: rotate(30deg);
 transform-origin: 0 0;
-
    
+
    
 
-
    
-  
     
    
-  
     
    
-
    
+  
    
+    
     
    
+    
     
    
+  
    
 
-
    +  
     transform: rotate(30deg);
 transform-origin: 100% 100%;
-
    
+
    
 
-
    
-  
     
    
-  
     
    
-
    
+  
    
+    
     
    
+    
     
    
+  
    
 
-
    +  
     transform: rotate(30deg);
 transform-origin: -1em -3em;
-
    
+
    
 
-
    
-  
     
    
-  
     
    
-
    
+  
    
+    
     
    
+    
     
    
+  
    
 
-
    +  
     transform: scale(1.7);
-
    
+
    
 
-
    
-  
     
    
-  
     
    
-
    
+  
    
+    
     
    
+    
     
    
+  
    
 
-
    +  
     transform: scale(1.7);
 transform-origin: 0 0;
-
    
+
    
 
-
    
-  
     
    
-  
     
    
-
    
+  
    
+    
     
    
+    
     
    
+  
    
 
-
    +  
     transform: scale(1.7);
 transform-origin: 100% -30%;
-
    
+
    
 
-
    
-  
     
    
-  
     
    
-
    
+  
    
+    
     
    
+    
     
    
+  
    
 
-
    +  
     transform: skewX(50deg);
 transform-origin: 100% -30%;
-
    
+
    
 
-
    
-  
     
    
-  
     
    
-
    
+  
    
+    
     
    
+    
     
    
+  
    
 
-
    +  
     transform: skewY(50deg);
 transform-origin: 100% -30%;
-
    
-
+
    
 
    
 ```
 
@@ -278,7 +286,7 @@ transform-origin: 100% -30%;
   transform: scale(1.7);
 }
 
-.box7  {
+.box7 {
   transform: scale(1.7);
   transform-origin: 0 0;
 }
diff --git a/files/fr/web/css/transform/index.md b/files/fr/web/css/transform/index.md
index 553926bcb3d708..71c602367aca28 100644
--- a/files/fr/web/css/transform/index.md
+++ b/files/fr/web/css/transform/index.md
@@ -21,7 +21,7 @@ Si la propriété est différente de `none`, un [contexte d'empilement](/fr/docs
 transform: none;
 
 /* Valeurs fonctionnelles */
-transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
+transform: matrix(1, 2, 3, 4, 5, 6);
 transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
 
 transform: translate(12px, 50%);
@@ -44,7 +44,7 @@ transform: rotate(0.5turn);
 transform: rotateX(10deg);
 transform: rotateY(10deg);
 transform: rotateZ(10deg);
-transform: rotate3d(1, 2.0, 3.0, 10deg);
+transform: rotate3d(1, 2, 3, 10deg);
 
 transform: perspective(17px);
 
diff --git a/files/fr/web/css/transition-duration/index.md b/files/fr/web/css/transition-duration/index.md
index 709094063f9f32..d17f68c3dfdb94 100644
--- a/files/fr/web/css/transition-duration/index.md
+++ b/files/fr/web/css/transition-duration/index.md
@@ -48,13 +48,13 @@ transition-duration: unset;
 #### HTML
 
 ```html
-  
    0,5 secondes
    
+
    0,5 secondes
    
 
-  
    2 secondes
    
+
    2 secondes
    
 
-  
    4 secondes
    
+
    4 secondes
    
 
-  
+
 ```
 
 #### CSS
diff --git a/files/fr/web/css/transition-property/index.md b/files/fr/web/css/transition-property/index.md
index e4fbf6d2c35728..378e6ace6b5f74 100644
--- a/files/fr/web/css/transition-property/index.md
+++ b/files/fr/web/css/transition-property/index.md
@@ -31,7 +31,10 @@ transition-property: sliding-vertically;
 /* Valeurs multiples */
 transition-property: test1, animation4;
 transition-property: all, height, all;
-transition-property: all, -moz-specific, sliding;
+transition-property:
+  all,
+  -moz-specific,
+  sliding;
 
 /* Avec des valeurs globales */
 transition-property: inherit;
diff --git a/files/fr/web/css/transition-timing-function/index.md b/files/fr/web/css/transition-timing-function/index.md
index bc09cc8f7caa88..9b8bee7bd05146 100644
--- a/files/fr/web/css/transition-timing-function/index.md
+++ b/files/fr/web/css/transition-timing-function/index.md
@@ -33,7 +33,7 @@ transition-timing-function: step-end;
 
 /* Valeurs fonctionnelles */
 transition-timing-function: steps(4, jump-end);
-transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
 
 /* Valeurs avec une fonction en escalier */
 transition-timing-function: steps(4, jump-start);
@@ -44,7 +44,7 @@ transition-timing-function: steps(6, start);
 transition-timing-function: steps(8, end);
 
 /* Utilisation de plusieurs fonctions */
-transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);
 
 /* Valeurs globales */
 transition-timing-function: inherit;
@@ -118,33 +118,34 @@ transition-timing-function: unset;
 ```
 
 ```css hidden
-.parent {}
+.parent {
+}
 .parent > div[class] {
-    width: 12em;
-    min-width: 12em;
-    margin-bottom: 4px;
-    background-color: black;
-    border: 1px solid red;
-    color: white;
-    transition-property: all;
-    transition-duration: 7s;
+  width: 12em;
+  min-width: 12em;
+  margin-bottom: 4px;
+  background-color: black;
+  border: 1px solid red;
+  color: white;
+  transition-property: all;
+  transition-duration: 7s;
 }
-.parent > div.box1{
-    width: 90vw;
-    min-width: 24em;
-    background-color: magenta;
-    color: yellow;
-    border: 1px solid orange;
-    transition-property: all;
-    transition-duration: 2s;
+.parent > div.box1 {
+  width: 90vw;
+  min-width: 24em;
+  background-color: magenta;
+  color: yellow;
+  border: 1px solid orange;
+  transition-property: all;
+  transition-duration: 2s;
 }
 ```
 
 ```js hidden
 function updateTransition() {
   var els = document.querySelectorAll(".parent > div[class]");
-  for(var c = els.length, i = 0; i < c; i++) {
-     els[i].classList.toggle("box1");
+  for (var c = els.length, i = 0; i < c; i++) {
+    els[i].classList.toggle("box1");
   }
 }
 
@@ -153,22 +154,22 @@ var intervalID = window.setInterval(updateTransition, 10000);
 
 ```css
 .ease {
-   transition-timing-function: ease;
+  transition-timing-function: ease;
 }
 .easein {
-   transition-timing-function: ease-in;
+  transition-timing-function: ease-in;
 }
 .easeout {
-   transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
 }
 .easeinout {
-   transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
 }
 .linear {
-   transition-timing-function: linear;
+  transition-timing-function: linear;
 }
 .cb {
-   transition-timing-function: cubic-bezier(0.2,-2,0.8,2);
+  transition-timing-function: cubic-bezier(0.2, -2, 0.8, 2);
 }
 ```
 
@@ -188,33 +189,34 @@ var intervalID = window.setInterval(updateTransition, 10000);
 ```
 
 ```css hidden
-.parent {}
+.parent {
+}
 .parent > div[class] {
-    width: 12em;
-    min-width: 12em;
-    margin-bottom: 4px;
-    background-color: black;
-    border: 1px solid red;
-    color: white;
-    transition-property: all;
-    transition-duration:7s;
+  width: 12em;
+  min-width: 12em;
+  margin-bottom: 4px;
+  background-color: black;
+  border: 1px solid red;
+  color: white;
+  transition-property: all;
+  transition-duration: 7s;
 }
-.parent > div.box1{
-    width: 90vw;
-    min-width: 24em;
-    background-color: magenta;
-    color: yellow;
-    border: 1px solid orange;
-    transition-property: all;
-    transition-duration:2s;
+.parent > div.box1 {
+  width: 90vw;
+  min-width: 24em;
+  background-color: magenta;
+  color: yellow;
+  border: 1px solid orange;
+  transition-property: all;
+  transition-duration: 2s;
 }
 ```
 
 ```js hidden
 function updateTransition() {
   var els = document.querySelectorAll(".parent > div[class]");
-  for(var c = els.length, i = 0; i < c; i++) {
-     els[i].classList.toggle("box1");
+  for (var c = els.length, i = 0; i < c; i++) {
+    els[i].classList.toggle("box1");
   }
 }
 
@@ -223,22 +225,22 @@ var intervalID = window.setInterval(updateTransition, 10000);
 
 ```css
 .jump-start {
-   transition-timing-function: steps(5, jump-start);
+  transition-timing-function: steps(5, jump-start);
 }
 .jump-end {
-   transition-timing-function: steps(5, jump-end);
+  transition-timing-function: steps(5, jump-end);
 }
 .jump-none {
-   transition-timing-function: steps(5, jump-none);
+  transition-timing-function: steps(5, jump-none);
 }
 .jump-both {
-   transition-timing-function: steps(5, jump-both);
+  transition-timing-function: steps(5, jump-both);
 }
 .step-start {
-   transition-timing-function: step-start;
+  transition-timing-function: step-start;
 }
 .step-end {
-   transition-timing-function: step-end;
+  transition-timing-function: step-end;
 }
 ```
 
diff --git a/files/fr/web/css/transition/index.md b/files/fr/web/css/transition/index.md
index 93ca099bdc653f..0be283185fa0f8 100644
--- a/files/fr/web/css/transition/index.md
+++ b/files/fr/web/css/transition/index.md
@@ -29,7 +29,9 @@ transition: margin-right 4s ease-in-out;
 transition: margin-right 4s ease-in-out 1s;
 
 /* S'applique à deux propriétés */
-transition: margin-right 4s, color 1s;
+transition:
+  margin-right 4s,
+  color 1s;
 
 /* S'applique à toutes les propriétés modifiées */
 transition: all 0.5s ease-out;
diff --git a/files/fr/web/css/universal_selectors/index.md b/files/fr/web/css/universal_selectors/index.md
index 482d1f5327e302..2370abd6f21597 100644
--- a/files/fr/web/css/universal_selectors/index.md
+++ b/files/fr/web/css/universal_selectors/index.md
@@ -33,12 +33,12 @@ L'astérisque est optionnelle lorsqu'elle est utilisée avec des sélecteurs sim
 ### CSS
 
 ```css
-* [lang^=fr] {
-  color:green;
+* [lang^="fr"] {
+  color: green;
 }
 
 *.warning {
-  color:red;
+  color: red;
 }
 
 *#maincontent {
diff --git a/files/fr/web/css/url/index.md b/files/fr/web/css/url/index.md
index a12a5333ac82a3..b801d4710cc53e 100644
--- a/files/fr/web/css/url/index.md
+++ b/files/fr/web/css/url/index.md
@@ -6,7 +6,7 @@ translation_of: Web/CSS/url()
 
 {{CSSRef}}
 
-La fonction [CSS](/fr/docs/Web/CSS) **`url()`** est utilisée afin d'inclure un fichier. Le paramètre est une URL absolue, une URL relative ou un URI de donnée. La fonction **`url()`** peut être utilisée comme paramètre d'une autre fonction comme [`attr()`](/fr/docs/Web/CSS/attr()). Selon la propriété pour laquelle elle est utilisée, la ressource utilisée peut être une image, une police ou une feuille de style.
+La fonction [CSS](/fr/docs/Web/CSS) **`url()`** est utilisée afin d'inclure un fichier. Le paramètre est une URL absolue, une URL relative ou un URI de donnée. La fonction **`url()`** peut être utilisée comme paramètre d'une autre fonction comme [`attr()`](). Selon la propriété pour laquelle elle est utilisée, la ressource utilisée peut être une image, une police ou une feuille de style.
 
 La notation fonctionnelle `url()` correspond au type de donnée CSS ``.
 
@@ -93,7 +93,7 @@ url(  * )
 
 ```css
 .topbanner {
-  background: url("banniere_haut.png") #00D no-repeat fixed;
+  background: url("banniere_haut.png") #00d no-repeat fixed;
 }
 ```
 
@@ -121,7 +121,7 @@ ul {
 
 ```css
 li::after {
-  content: ' - ' url(star.gif);
+  content: " - " url(star.gif);
 }
 ```
 
@@ -186,7 +186,7 @@ Lorsqu'une URL est utilisée comme chemin d'un filtre, l'URL doit être :
 ## Voir aussi
 
 - [``](/fr/docs/Web/CSS/gradient)
-- [`element()`](/fr/docs/Web/CSS/element())
-- [`image()`](/fr/docs/Web/CSS/image/image())
-- [`image-set()`](/fr/docs/Web/CSS/image/image-set())
-- [`cross-fade()`](/fr/docs/Web/CSS/cross-fade())
+- [`element()`]()
+- [`image()`]()
+- [`image-set()`]()
+- [`cross-fade()`]()
diff --git a/files/fr/web/css/used_value/index.md b/files/fr/web/css/used_value/index.md
index 58fecfce48ce07..9e66a7d6870c6f 100644
--- a/files/fr/web/css/used_value/index.md
+++ b/files/fr/web/css/used_value/index.md
@@ -83,7 +83,7 @@ div {
 ```js
 function updateUsedWidth(id) {
   var div = document.querySelector(`#${id}`);
-  var par = div.querySelector('.show-used-width');
+  var par = div.querySelector(".show-used-width");
   var wid = window.getComputedStyle(div)["width"];
   par.textContent = `Used width: ${wid}.`;
 }
@@ -95,7 +95,7 @@ function updateAllUsedWidths() {
 }
 
 updateAllUsedWidths();
-window.addEventListener('resize', updateAllUsedWidths);
+window.addEventListener("resize", updateAllUsedWidths);
 ```
 
 ### Résultat
diff --git a/files/fr/web/css/user-select/index.md b/files/fr/web/css/user-select/index.md
index 3d63af2a48ecf5..d4be6a9534f294 100644
--- a/files/fr/web/css/user-select/index.md
+++ b/files/fr/web/css/user-select/index.md
@@ -92,7 +92,9 @@ user-select: unset;
 ```html
 
    Vous devriez pouvoir sélectionner ce texte.
    
 
    Hop, vous ne pouvez pas sélectionner ce texte !
    
-
    Cliquer une fois permettra de sélectionner l'ensemble du texte.
    
+
    
+  Cliquer une fois permettra de sélectionner l'ensemble du texte.
+
    
 ```
 
 ### Résultat
diff --git a/files/fr/web/css/using_css_custom_properties/index.md b/files/fr/web/css/using_css_custom_properties/index.md
index 28605a48c53d58..dc88cfd83d7e96 100644
--- a/files/fr/web/css/using_css_custom_properties/index.md
+++ b/files/fr/web/css/using_css_custom_properties/index.md
@@ -93,10 +93,10 @@ Appliquons-le à ce code HTML :
 
 ```html
 
    
-    
    Toto
    
-    
    Texte - encore du texte
    
-    
-    
+  
    Toto
    
+  
    Texte - encore du texte
    
+  
+  
 
    
 ```
 
@@ -150,10 +150,10 @@ Remarquez la répétition dans le CSS. La couleur d'arrière-plan est définie 
 
 ```html hidden
 
    
-    
    Toto
    
-    
    Text - more text
    
-    
-    
+  
    Toto
    
+  
    Text - more text
    
+  
+  
 
    
 ```
 
@@ -166,10 +166,8 @@ Il y a un héritage des propriétés personnalisées. Cela signifie que si une p
 ```html
 
    
   
    
-    
    
-    
    
-    
    
-    
    
+    
    
+    
    
   
    
 
    
 ```
@@ -243,9 +241,15 @@ Lorsque le navigateur analyse une substitution `var()` invalide, c'est la valeur
 ### CSS
 
 ```css
-:root { --text-color: 16px; }
-p { color: blue; }
-p { color: var(--text-color); }
+:root {
+  --text-color: 16px;
+}
+p {
+  color: blue;
+}
+p {
+  color: var(--text-color);
+}
 ```
 
 Comme on pourrait s'y attendre, la valeur applique la substitution avec `--text-color` à la place de `var(--text-color)` mais `16px` n'est pas une valeur valide pour {{cssxref("color")}}. Après la substitution, la déclaration n'a plus aucun sens. Le navigateur résoud ce problème en deux étapes :
diff --git a/files/fr/web/css/var/index.md b/files/fr/web/css/var/index.md
index 06a8191c3f8474..ae95200007df4e 100644
--- a/files/fr/web/css/var/index.md
+++ b/files/fr/web/css/var/index.md
@@ -32,7 +32,7 @@ Le premier argument de la fonction est le nom de la propriété qu'on veut subst
 ## Exemples
 
 ```css
-:root{
+:root {
   --main-bg-color: pink;
 }
 
diff --git a/files/fr/web/css/vertical-align/index.md b/files/fr/web/css/vertical-align/index.md
index e42438501b3172..fb328c69fe13bb 100644
--- a/files/fr/web/css/vertical-align/index.md
+++ b/files/fr/web/css/vertical-align/index.md
@@ -108,22 +108,39 @@ Pour les éléments qui n'ont pas de ligne de base définie, c'est le bord de la
 #### HTML
 
 ```html
-
    Une link image avec
- un alignement par défaut.
    
-
    Une link image avec
- un alignement en haut du texte.
    
-
    Une link image avec
- un alignement en bas du texte.
    
-
    Une link image avec
- un alignement au milieu.
    
+
    
+  Une link image avec
+  un alignement par défaut.
+
    
+
    
+  Une
+  link
+  image avec un alignement en haut du texte.
+
    
+
    
+  Une
+  link
+  image avec un alignement en bas du texte.
+
    
+
    
+  Une
+  link
+  image avec un alignement au milieu.
+
    
 ```
 
 #### CSS
 
 ```css
-img.top { vertical-align: text-top; }
-img.bottom { vertical-align: text-bottom; }
-img.middle { vertical-align: middle; }
+img.top {
+  vertical-align: text-top;
+}
+img.bottom {
+  vertical-align: text-bottom;
+}
+img.middle {
+  vertical-align: middle;
+}
 ```
 
 #### Résultat
@@ -136,20 +153,20 @@ img.middle { vertical-align: middle; }
 
 ```html
 
    
-top:         
-middle:      
-bottom:      
-super:       
-sub:         
+  top:  middle:
+   bottom:
+   super:
+   sub:
+  
 
    
 
 
    
-text-top:    
-text-bottom: 
-0.2em:       
--1em:        
-20%:         
--100%:       
+  text-top:  text-bottom:
+   0.2em:
+   -1em:
+   20%:
+   -100%:
+  
 
    
 ```
 
@@ -164,7 +181,7 @@ img {
 
 p {
   height: 3em;
-  padding: 0 .5em;
+  padding: 0 0.5em;
   font-family: monospace;
   text-decoration: underline overline;
   margin-left: auto;
@@ -189,14 +206,17 @@ p {
     middle
     bottom
     
-      
    Elle voulait savoir si elle grandissait ou rapetissait, et fut
-         tout étonnée de rester la même; franchement, c'est ce qui
-         arrive le plus souvent lorsqu'on mange du gâteau; mais Alice
-         avait tellement pris l'habitude de s'attendre à des choses
-         extraordinaires, que cela lui paraissait ennuyeux et stupide
-         de vivre comme tout le monde.
    
-      
    Aussi elle se remit à l'œuvre, et eut bien vite fait
-         disparaître le gâteau.
    
+      
    
+        Elle voulait savoir si elle grandissait ou rapetissait, et fut tout
+        étonnée de rester la même; franchement, c'est ce qui arrive le plus
+        souvent lorsqu'on mange du gâteau; mais Alice avait tellement pris
+        l'habitude de s'attendre à des choses extraordinaires, que cela lui
+        paraissait ennuyeux et stupide de vivre comme tout le monde.
+      
    
+      
    
+        Aussi elle se remit à l'œuvre, et eut bien vite fait disparaître le
+        gâteau.
+      
    
     
   
 
@@ -211,7 +231,9 @@ table {
   width: 80%;
 }
 
-table, th, td {
+table,
+th,
+td {
   border: 1px solid black;
 }
 
diff --git a/files/fr/web/css/viewport_concepts/index.md b/files/fr/web/css/viewport_concepts/index.md
index b1d7c63086eafb..44d68b96601ecf 100644
--- a/files/fr/web/css/viewport_concepts/index.md
+++ b/files/fr/web/css/viewport_concepts/index.md
@@ -26,15 +26,15 @@ Pour résumer, la zone d'affichage est la zone du document actuellement visible
 La largeur de la zone d'affichage n'est pas toujours la largeur de la fenêtre. Si vous accédez à la largeur et à la hauteur de la fenêtre et à celles du document avec Chrome ou Firefox, vous pourrez obtenir un résultat comme celui-ci :
 
 ```js
-document.documentElement.clientWidth /* 1200 */
-window.innerWidth /* 1200 */
-window.outerWidth /* 1200 */
+document.documentElement.clientWidth; /* 1200 */
+window.innerWidth; /* 1200 */
+window.outerWidth; /* 1200 */
 ```
 
 ```js
-document.documentElement.clientHeight /* 800 */
-window.innerHeight /* 800 */
-window.outerHeight /* 900 */
+document.documentElement.clientHeight; /* 800 */
+window.innerHeight; /* 800 */
+window.outerHeight; /* 900 */
 ```
 
 Il existe plusieurs propriétés du DOM qui permettent d'obtenir la taille de la zone d'affichage et certaines dimensions associées :
@@ -50,15 +50,15 @@ La zone contenu entre `innerHeight` et `innerWidth` correspond à **la zone d'af
 Lorsqu'on zoome, FIrefox et Chrome renvoient une nouvelle taille, en pixels CSS, pour `innerWidth` et `clientWidth`. Les valeurs renvoyées pour `outerWidth` et `outerHeight` dépendent du navigateur : Firefox rapporte la nouvelle valeur en pixels CSS et Chrome renvoie la longueur exprimée avec la taille par défaut d'un pixel. Lorsqu'on a zoomé, on pourra obtenir :
 
 ```js
-document.documentElement.clientWidth /* 800 */
-window.innerWidth /* 800 */
-window.outerWidth /* 800 dans Firefox, 1200 dans Chrome */
+document.documentElement.clientWidth; /* 800 */
+window.innerWidth; /* 800 */
+window.outerWidth; /* 800 dans Firefox, 1200 dans Chrome */
 ```
 
 ```js
-document.documentElement.clientHeight /* 533 */
-window.innerHeight /* 533 */
-window.outerHeight /* 596 dans Firefox, 900 dans Chrome */
+document.documentElement.clientHeight; /* 533 */
+window.innerHeight; /* 533 */
+window.outerHeight; /* 596 dans Firefox, 900 dans Chrome */
 ```
 
 La zone d'affichage mesurait initialement 1200 x 800 pixels. Après le zoom, la zone d'affichage mesure 800 x 533 pixels. C'est la zone d'affichage pour la disposition. Avec la feuille de style suivante, les hauts et pieds de page seront placés en haut et en bas de _la zone d'affichage pour la disposition_.
@@ -147,7 +147,7 @@ L'API [Visual Viewport](/fr/docs/Web/API/Visual_Viewport_API) fournit des outils
 Il existe une grande variété de tailles et de proportions pour les appareils mobiles. La zone d'affichage d'un navigateur mobile est la zone de la fenêtre sur laquelle le contenu web peut être consulté et cette zone n'a pas nécessairement la même taille que la page affichée. Les navigateurs mobiles affichent les pages sur une zone d'affichage virtuelle (mesurant généralement 960px) plus large que l'écran puis réduisent le résultat afin que l'utilisateur puisse voir l'ensemle du document. L'utilisateur peut alors se déplacer ou zoomer au doigt pour accéder aux différentes zones de la page. Ainsi, si un appareil mobile a un écran large de 320px, un site web pourra être affiché selon une zone d'affichage virtuelle sur 960px puis réduit afin de pouvoir s'inscrire dans l'espace large de 320px. Le résultat ainsi obtenu risque peu d'être lisible. Pour indiquer à un navigateur mobile d'utiliser la largeur de la zone d'affichage réelle plutôt que la largeur virtuelle de 960px, on pourra placer la balise `` suivante :
 
 ```html
-
+
 ```
 
 La propriété `width` contrôle la taille de la zone d'affichage et on l'utilisera généralement avec `device-width` qui correspond à la largeur de l'écran, exprimée en pixels CSS, avec un zoom de 100%. Il est possible d'utiliser d'autres propriétés comme `maximum-scale`, `minimum-scale` et `user-scalable` afin de contrôler si l'utilisateur peut zoomer/dézoomer sur la page mais les valeurs par défaut restent les meilleures en termes d'accessibilité et d'ergonomie et ne seront pas plus abordées ici par souci de concision.
diff --git a/files/fr/web/css/visibility/index.md b/files/fr/web/css/visibility/index.md
index 6602a81e6fde36..776238476531de 100644
--- a/files/fr/web/css/visibility/index.md
+++ b/files/fr/web/css/visibility/index.md
@@ -63,16 +63,12 @@ Les valeurs de visibilité peuvent être interpolées entre _visible_ et _masqu
 
 ```html
 
    
-  On peut dire tout ce qu'on veut ici,
-  ce ne sera pas lisible de toute façon.
+  On peut dire tout ce qu'on veut ici, ce ne sera pas lisible de toute façon.
 
    
 
    
-  Alors que là, on a la bonne classe.
-  Coucou tout le monde :)
-
    
-
    
-  Et on repasse en mode invisible.
+  Alors que là, on a la bonne classe. Coucou tout le monde :)
 
    
+
    Et on repasse en mode invisible.
    
 ```
 
 #### CSS
diff --git a/files/fr/web/css/visual_formatting_model/index.md b/files/fr/web/css/visual_formatting_model/index.md
index 45e37687a981b8..c3cc6a26398ca2 100644
--- a/files/fr/web/css/visual_formatting_model/index.md
+++ b/files/fr/web/css/visual_formatting_model/index.md
@@ -48,14 +48,14 @@ Si on prend le code HTML suivant, mis en forme avec les règles par défaut (`di
 
 ```html
 
    
-   Some inline text
-   
    followed by a paragraph
    
-   followed by more inline text.
+  Some inline text
+  
    followed by a paragraph
    
+  followed by more inline text.
 
    
 ```
 
 On aura deux boîtes de bloc anonymes qui seront créées : une pour le texte avant le paragraphe et une pour le texte après. On aura alors la structure suivante :
-  ![anonymous_block-level_boxes.png](anonymous_block-level_boxes.png)
+![anonymous_block-level_boxes.png](anonymous_block-level_boxes.png)
 
 À la différence de la boîte des éléments {{HTMLElement("p")}}, les développeurs ne peuvent pas contrôler la mise en forme des boîtes anonymes. Les propriétés qui héritent des éléments parents récupèreront la valeur obtenue pour l'élément {{HTMLElement("div")}} et les autres propriétés auront la valeur `initial`.
 
@@ -89,26 +89,25 @@ Les boîtes en lignes atomiques ne peuvent pas être divisées en plusieurs lign
 
 
    
-   Le texte dans le span peut être divisé
-   en plusieurs lignes dans une boîte en
-   ligne.
+  Le texte dans le span peut être divisé en plusieurs lignes dans
+  une boîte en ligne.
 
    
 ```
 
 ```html
 
 
    
-   Le texte dans le span ne peut pas être
-   divisé en plusieurs lignes car il est
-   dans une boîte de type inline-block.
+  Le texte dans le span
+  ne peut pas être divisé en plusieurs lignes car il est dans une
+  boîte de type inline-block.
 
    
 ```
 
diff --git a/files/fr/web/css/white-space/index.md b/files/fr/web/css/white-space/index.md
index 5a88b9c423cad5..ed9bb8b8ffa285 100644
--- a/files/fr/web/css/white-space/index.md
+++ b/files/fr/web/css/white-space/index.md
@@ -120,17 +120,9 @@ Le tableau qui suit résume le comportement des différentes valeurs :
 
 ```html
 
-var coucou = function(){
-  // on notera l'indentation
-  // avec deux espaces
-  console.log("Hello World");
-
-  var toto = function(){
-    // ici 4 espaces
-    console.log("Toto");
-  }
-  toto();
-}
+  var coucou = function(){ // on notera l'indentation // avec deux espaces
+  console.log("Hello World"); var toto = function(){ // ici 4 espaces
+  console.log("Toto"); } toto(); }
 
 ```
 
@@ -162,8 +154,8 @@ function jeNAuraisJamaisDuAppelerCetteFonctionAvecUnNomAussiLong(toto){
 
 ```css
 pre {
-  word-wrap: break-word;      /* IE 5.5-7 */
-  white-space: pre-wrap;      /* current browsers */
+  word-wrap: break-word; /* IE 5.5-7 */
+  white-space: pre-wrap; /* current browsers */
 }
 ```
 
diff --git a/files/fr/web/css/widows/index.md b/files/fr/web/css/widows/index.md
index 1c7750f7211a50..512254a6b94715 100644
--- a/files/fr/web/css/widows/index.md
+++ b/files/fr/web/css/widows/index.md
@@ -62,8 +62,13 @@ p:first-child {
 ```html
 
    
   
    Un premier paragraphe avec un peu de texte.
    
-  
    Un deuxième paragraphe avec un peu plus de texte et qui permet d'illustrer le fonctionnement de widows.
    
-  
    Enfin, un troisième paragraphe avec un peu plus de texte que le premier.
    
+  
    
+    Un deuxième paragraphe avec un peu plus de texte et qui permet d'illustrer
+    le fonctionnement de widows.
+  
    
+  
    
+    Enfin, un troisième paragraphe avec un peu plus de texte que le premier.
+  
    
 
    
 ```
 
diff --git a/files/fr/web/css/width/index.md b/files/fr/web/css/width/index.md
index 37ff5aca763d6f..2cf8e758e06d8a 100644
--- a/files/fr/web/css/width/index.md
+++ b/files/fr/web/css/width/index.md
@@ -141,8 +141,8 @@ p.goldie {
 ```css
 p.maxgreen {
   background: lightgreen;
-  width: intrinsic;           /* Safari/WebKit utilisent un nom non-standard */
-  width: -moz-max-content;    /* Firefox/Gecko */
+  width: intrinsic; /* Safari/WebKit utilisent un nom non-standard */
+  width: -moz-max-content; /* Firefox/Gecko */
   width: -webkit-max-content; /* Chrome */
 }
 ```
@@ -158,7 +158,7 @@ p.maxgreen {
 ```css
 p.minblue {
   background: lightblue;
-  width: -moz-min-content;    /* Firefox */
+  width: -moz-min-content; /* Firefox */
   width: -webkit-min-content; /* Chrome */
 }
 ```
@@ -174,7 +174,7 @@ p.minblue {
 Il faut s'assurer que les éléments sur lesquels on utilise `width` ne sont pas tronqués et ne masquent pas d'autre contenu sur la page lorsque l'utilisateur zoome afin d'agrandir la taille du texte.
 
 - [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.4  | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)
+- [_Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)
 
 ## Spécifications
 
diff --git a/files/fr/web/css/will-change/index.md b/files/fr/web/css/will-change/index.md
index b464fb866d8281..5025f9b7b82f39 100644
--- a/files/fr/web/css/will-change/index.md
+++ b/files/fr/web/css/will-change/index.md
@@ -15,9 +15,9 @@ La propriété **`will-change`** fournit une indication au navigateur sur la pro
 will-change: auto;
 will-change: scroll-position;
 will-change: contents;
-will-change: transform;        /* Exemple de  */
-will-change: opacity;          /* Exemple de  */
-will-change: left, top;        /* Exemple de deux  */
+will-change: transform; /* Exemple de  */
+will-change: opacity; /* Exemple de  */
+will-change: left, top; /* Exemple de deux  */
 
 /* Valeurs globales */
 will-change: inherit;
@@ -68,21 +68,21 @@ Un valeur de type `` peut être :
 Dans l'exemple précédent, on applique la propriété `will-change` à même la feuille de style. Dans ce cas, le navigateur conservera l'optimisation en mémoire beaucoup plus longtemps que nécessaire. Nous avons vu précédemment que cela devait être évité et voici donc un deuxième exemple qui illustre comment appliquer la propriété `will-change` grâce à JavaScript (et qui correspond donc à la méthode qui devrait être utilisée la plupart du temps) :
 
 ```js
-var el = document.getElementById('element');
+var el = document.getElementById("element");
 
 // On applique will-change quand la souris/curseur
 // pointeur/stylet passe au-dessus de l'élément
-el.addEventListener('mouseenter', hintBrowser);
-el.addEventListener('animationEnd', removeHint);
+el.addEventListener("mouseenter", hintBrowser);
+el.addEventListener("animationEnd", removeHint);
 
 function hintBrowser() {
   // On liste les propriétés sujettes au changement
   // lors de l'animation
-  this.style.willChange = 'transform, opacity';
+  this.style.willChange = "transform, opacity";
 }
 
 function removeHint() {
-  this.style.willChange = 'auto';
+  this.style.willChange = "auto";
 }
 ```
 
diff --git a/files/fr/web/css/word-break/index.md b/files/fr/web/css/word-break/index.md
index dcf74662e46801..22d1d0d3976fc4 100644
--- a/files/fr/web/css/word-break/index.md
+++ b/files/fr/web/css/word-break/index.md
@@ -54,24 +54,32 @@ La propriété `word-break` est définie avec un mot-clé parmi ceux décrits ci
 
 ```html
 
    1. word-break: normal
    
-
    This is a long and
- Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
- グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
    
+
    
+  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
+  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
+
    
 
 
    2. word-break: break-all
    
-
    This is a long and
- Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
- グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
    
+
    
+  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
+  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
+
    
 
 
    3. word-break: keep-all
    
-
    This is a long and
- Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
- グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
    
+
    
+  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
+  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
+
    
 
 
    4. word-break: break-word
    
-
    This is a long and
-  Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
- グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
    
+
    
+  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
+  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
+
    
 ```
 
 ### CSS
diff --git a/files/fr/web/css/word-spacing/index.md b/files/fr/web/css/word-spacing/index.md
index 918ab09157dfef..ebf6367629120a 100644
--- a/files/fr/web/css/word-spacing/index.md
+++ b/files/fr/web/css/word-spacing/index.md
@@ -54,8 +54,8 @@ word-spacing: unset;
 ### HTML
 
 ```html
-
    Voici le texte de la ligne 1 
    
-
    Et voilà celui de la ligne 2 
    
+
    Voici le texte de la ligne 1
    
+
    Et voilà celui de la ligne 2
    
 ```
 
 ### CSS
diff --git a/files/fr/web/css/writing-mode/index.md b/files/fr/web/css/writing-mode/index.md
index b9b27921f88ff8..909dfadf6435cb 100644
--- a/files/fr/web/css/writing-mode/index.md
+++ b/files/fr/web/css/writing-mode/index.md
@@ -68,42 +68,43 @@ Ce fragment de code HTML contient un tableau ({{HTMLElement("table")}}) dont cha
 
 ```html
 
-    
-        
-        
-        
-        
-    
-    
-        
-        
-        
-        
-    
-    
-        
-        
-        
-        
-    
-    
-        
-        
-        
-        
-    
-    
-        
-        
-        
-        
-    
-    
-        
-        
-        
-        
-    
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+
    ValeurSystème d'écriture verticalSystème d'écriture horizontalSystème d'écriture hybride
    horizontal-tb我家没有电脑。Example text1994年に至っては
    vertical-lr我家没有电脑。Example text1994年に至っては
    vertical-rl我家没有电脑。Example text1994年に至っては
    sideways-lr我家没有电脑。Example text1994年に至っては
    sideways-rl我家没有电脑。Example text1994年に至っては
    ValeurSystème d'écriture verticalSystème d'écriture horizontalSystème d'écriture hybride
    horizontal-tb我家没有电脑。Example text1994年に至っては
    vertical-lr我家没有电脑。Example text1994年に至っては
    vertical-rl我家没有电脑。Example text1994年に至っては
    sideways-lr我家没有电脑。Example text1994年に至っては
    sideways-rl我家没有电脑。Example text1994年に至っては
    
 ```
 
 ### CSS
@@ -112,11 +113,13 @@ Cette première partie permet uniquement de rendre les choses plus agréables à
 
 ```css
 table {
-  border-collapse:collapse;
+  border-collapse: collapse;
 }
 
-td, th {
-  border: 1px black solid; padding: 3px;
+td,
+th {
+  border: 1px black solid;
+  padding: 3px;
 }
 th {
   background-color: lightgray;
@@ -126,31 +129,36 @@ th {
 Ensuite, on ajoute la direction du contenu pour chaque cellule du tableau :
 
 ```css
-.example.Text1 span, .example.Text1 {
+.example.Text1 span,
+.example.Text1 {
   writing-mode: horizontal-tb;
   -webkit-writing-mode: horizontal-tb;
   -ms-writing-mode: horizontal-tb;
 }
 
-.example.Text2 span, .example.Text2 {
+.example.Text2 span,
+.example.Text2 {
   writing-mode: vertical-lr;
   -webkit-writing-mode: vertical-lr;
   -ms-writing-mode: vertical-lr;
 }
 
-.example.Text3 span, .example.Text3 {
+.example.Text3 span,
+.example.Text3 {
   writing-mode: vertical-rl;
   -webkit-writing-mode: vertical-rl;
   -ms-writing-mode: vertical-rl;
 }
 
-.example.Text4 span, .example.Text4 {
+.example.Text4 span,
+.example.Text4 {
   writing-mode: sideways-lr;
   -webkit-writing-mode: sideways-lr;
   -ms-writing-mode: sideways-lr;
 }
 
-.example.Text5 span, .example.Text5 {
+.example.Text5 span,
+.example.Text5 {
   writing-mode: sideways-rl;
   -webkit-writing-mode: sideways-rl;
   -ms-writing-mode: sideways-rl;